如何使此jQuery函数更通用（使用类而不丢失特定位置）

Question

How to make this jQuery function more generic? I would prefer if #draggable was .draggable and the function could determine what .draggable was clicked, and then handle that element untill unbind.

Thanks!

function drag(){
    $(document).bind('mousemove', function(e){
        $('#draggable').css({
           left:  e.pageX,
           top:   e.pageY
        });
    });
};
function drop(){
    $(document).unbind('mousemove');
    $('#draggable').css({
        left:  $('.box').position().left,
        top:   $('.box').position().top
    });
    alert('Well Done! ^^')
};

<div id="draggable" onclick="drag();">
    <!-- Image -->
</div>
<div class="box" onclick="drop();">
    <!-- Placeholder -->
</div>

source: http://paste.ubuntu.com/794168/

Answer 1

For the first step you could add a selector function for your function parameters:

function drag(selector) {
    $(selector) ... your code
}

The next step is to create a jQuery plugin to encapsulate this behavior. I've written many of these if you need advice.

Answer 2

Using jQuery UI is not the best way to learn, imo.

I modified your code a bit :

$(function(){
    var currentDrag;
    $('.draggable').click(function(){
        currentDrag = $(this);
        $(document).bind('mousemove.drag', function(e){
            currentDrag.css({
                left:  e.pageX + 1,
                top:   e.pageY + 1
            });
        });
    });

    $('.box').click(function(){
        if(currentDrag){
            $(document).unbind('mousemove.drag');
            currentDrag.css({
                left:  $('.box').position().left,
                top:   $('.box').position().top
            });
            currentDrag = "";
            alert('Well Done! ^^')
        }
    });
});


<div class="draggable">
    <!-- Image -->
</div>
<div class="box">
    <!-- Placeholder -->
</div>

Answer 3

i have the answer! check this fiddle:

http://jsfiddle.net/5zVB8/8/

the draggables use classes and the script knows which draggable is which!

the only problem is that if you click-drop a second item after click-dropping the first. an onclick handler for drop is on the drop "box" which is covered by the first draggable.

you didn't mention anything about hiding the first box after dragging to the box.

EDIT: added a release function so you can click-drag out the dropped draggable that's in the box to anywhere in the screen.