What is the best way to implement dragging functionality for an image within a specific area?

Here's a snippet of the code I'm working with:

link

This is the HTML code:

<div class="border">
    <div id="i-choose">
            <input type="file" name="file" id="file" class="inputfile">
            <label for="file">Browse</label>                    
     </div>
</div>

And here is the CSS code:

#i-choose {
    float: left;
    font-size: 17pt;
}

.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;}

#i-choose label {
    line-height: 0px;
    font-size: 17pt;
    margin-top: 12px;
    height: auto;
    color: #0096BD;
    margin-left: 5px;
    cursor: pointer;}

.border{
    border:1px dashed grey;
    overflow:hidden;
}

I'm trying to achieve an effect where an image can be uploaded within the div and then dragged and dropped.

For a clearer visual, I've included an image link below:

https://i.sstatic.net/GnzJu.png

If anyone has any insights on how to solve this issue, I would greatly appreciate it!

Thank you in advance!

htmlcssdrag-and-drop

Answer №1

Kindly review the provided sample JS code:

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

$("#file").change(function () {
    readURL(this);
});

CSS:

#div1 {
    border: 1px solid #aaaaaa;
    padding: 10px;
    min-height:70px;
    width: 350px;
}
#i-choose {
    float: left;
    font-size: 17pt;
}
.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

#i-choose label {
    line-height: 0px;
    font-size: 17pt;
    margin-top: 12px;
    height: auto;
    color: #0096BD;
    margin-left: 5px;
    cursor: pointer;
}

.border {
    border:1px dashed grey;
    overflow:hidden;
}

along with the respective HTML structure:

<form id="form1" runat="server">
<div class="border">
    <div id="i-choose">
        <input type='file' id="file" name="file" class="inputfile" />
        <label for="file">Browse</label>
        <img id="blah" src="#" alt="" draggable="true" ondragstart="drag(event)" />
    </div>
</div>

JsFiddle

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on creating my inaugural HTML embeddable widget?

A client recently requested me to create a JavaScript (MooTools)/HTML/CSS/PHP based game as a deployable widget. This will be my first time developing a widget, so I am seeking advice and insights to help me navigate any potential challenges from experie ...

phpjavascripthtmlcsswidget

Tips for indicating errors in fields that have not been "interacted with" when submitting

My Angular login uses a reactive form: public form = this.fb.group({ email: ['', [Validators.required, Validators.email]], name: ['', [Validators.required]], }); Upon clicking submit, the following actions are performed: ...

htmlangularangular-reactive-forms

How can a functional component be created in VueJS using x-templates?

Looking to create a functional component in VueJS with a template as a single-file component? Utilizing x-templates means your component will be stored in a .html file. Want to transform the given component into a functional component? <!-- my_compone ...

javascripthtmlvue.js

Error: The locator I used with the ID getUserById did not find any elements

Here is the code snippet from my HTML file: <h1>User list</h1> <button class="btn btn-primary" [routerLink]="'/register'">Register</button> <br> <br> <table class="table& ...

javascripthtmlangularprotractor

Grails is experiencing a surge of duplicate events being triggered simultaneously

In my _test.gsp layout, I have a 'click event' that is triggered when the layout is rendered as shown below. <div id="testid"> <g:render template="test"/> </div> When I click on the event in the _test.gsp layout, it trigge ...

javascriptjqueryhtmlgrails

The web application located on the server is having trouble recognizing and loading the stylesheet

After deploying the web app on MS Server 2008 R2, I noticed that it is not reading the style sheets on any of the pages. The masterpage only contains a ToolkitScriptManager with no styles. However, the source code shows the style links and accessing them d ...

asp.net.netcsswindows-server-2008-r2

Enter your password using the text input field on Internet Explorer 8

I'm currently developing a website and facing an issue with the password input field: When clicking on it in browsers like IE9, Chrome, and Mozilla, the text changes to allow entry of the password. However, in IE8, clicking on the input field leaves ...

phpjavascriptjqueryhtmlinternet-explorer

What is the best way to place text side by side with an image?

How can I align text below a picture like this? https://i.stack.imgur.com/WcNRa.jpg Here is the code snippet: https://jsfiddle.net/vzjj9eLy/ HTML: <span class="test"> <img src="http://cdn.sstatic.net/Sites/stackoverflow/img/<a href="/cd ...

htmlcss

What could be causing my jQuery $(this).next().removeAttribute to not function properly?

I am currently working on a file upload form that includes buttons like "Choose file", "Upload", and "Add other file". I am facing an issue where the "disabled" attribute is successfully removed from the first Upload button upon File Input change, but it ...

jqueryhtml

Revisiting the Issue: Jquery Hover Effect Fails to Function in Internet Explorer

Can anyone provide assistance with this issue? The code snippet works perfectly in all browsers except for IE, where the menu does not fade in and looks unattractive. html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...

javascriptjqueryhtmlcss

Use CSS media queries to swap out the map for an embedded image

Looking to make a change on my index page - swapping out a long Google Map for an embedded image version on mobile. The map displays fine on desktop, but on mobile it's too lengthy and makes scrolling difficult. I already adjusted the JS setting to "s ...

javascriptcssrubygoogle-mapsmedia-queries

Displaying Previously Selected Value in HTML Dropdown Menu

Using a combination of PHP and HTML, I have created an HTML table that is generated using a PHP while loop. The dropdown menu on the page displays all distinct portfolio names from my MySQL database by executing the following code: $query2 = "SELECT DISTI ...

javascriptphphtmlmysql

Opting for CSS3 transitions over jQuery animate

Currently, I am working on animating a block of HTML that involves fading in (opacity) and slightly moving from the left (margin-left)... $('.latest-stats').delay(1000).animate({ opacity: 1, marginLeft: '55px' }, 1000, function () { ...

javascriptjquerycss

Utilizing the "row" and "column" attributes in Angular (Flexbox) results in significant spacing between input fields within the HTML code

I'm working on aligning 2 input fields side by side within the same line. To achieve this, I've been utilizing Flexbox. However, I've observed that when using Flex with both 'row' and 'column', it introduces extra spacing ...

htmlcssangular

CSS Interactive Design Breakpoints

Do my Break points at 768, 480, and 225 provide enough support for a responsive design, or should I consider adding more? 768 + | Computer 480 - 768 | Tablet 225 - 480 | Smartphone 225 < | Phone / Mini Browser ...

htmlcss

Steps for sending data to a modal window

Consider this scenario: I have a function that retrieves some ids, and I utilize the following code to delete the corresponding posts: onClick={() => { Delete(idvalue[i]) }} Nevertheless, I am in need of a modal confirmation before proceeding with the ...

javascripthtmlarraysreactjsbootstrap-modal

How can I use jQuery to target elements other than the vertical scrollbar when

Here is how I am utilizing the mouseleave jquery event $(document).ready(function(){ $(document).mouseleave(function(event) { //perform a task }); }); Is there any method to prevent this event from triggering when a user scrolls ...

javascriptjqueryhtmlcss

The expansion animation for the Nextjs/React accordion box did not work as expected when utilizing tailwindcss

I am currently working on creating an animation for a collapsible box (accordion). My goal is to have the child component initially hidden with display:none. When I hover over the parent component, the child should be revealed and the dimensions of the pa ...

javascriptcssreactjsfrontendtailwind-css

Developing a personalized Avada form auto-scrolling algorithm

Our form, created using the Wordpress - Avada theme, needs an autoscroll feature. As users answer questions, the next question appears below, but this is not immediately visible on mobile devices. To address this, we require autoscroll functionality. The ...

javascripthtmljqueryformsautoscroll

"Troubleshooting problem with padding-right in Internet Explorer when displaying background image within

Encountering a problem with the IE browser (all versions up to IE 10). Here's the issue. The text in the input box is overlapping its background image. Unable to place this image in the parent div due to the dynamic nature of the input box and other ...

htmlcssinternet-explorerinput