Question

I’m creating somewhat of a map editor, I’d like to be able to click on an available image from the sidebar and it appears under the cursor and follows the mouse icon, so basically dragging the image, but I’d like the original image to stay put.

How would I achieve this in jQuery (preferably)?

Answer 1

Try this one using jQuery UI:

HTML:

<ul>
    <li id="draggable" class="ui-state-highlight">Your Image</li>
</ul>

<ul id="sortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>​

Script:

$(function() {
    $( "#sortable" ).sortable({
        revert: true
    });
    $( "#draggable" ).draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
    });
    $( "ul, li" ).disableSelection();
});​

Here I also create the fiddle http://jsfiddle.net/aanred/b3QFN/. You can also read the documentation here http://jqueryui.com/draggable/.