Drag onto another element

May 13, 2011 at 9:24 PM
Edited May 14, 2011 at 2:27 PM

Hello,

Congratulations for this nice piece of work. It is exactly what I needed, I am using it to rebuild the order of images in an image gallery.

I am thinking of deleting an image by dragging it onto a "recyle bin div". Is this possible?

Thanks for advice.

Coordinator
May 16, 2011 at 1:15 PM

Nothing built-in but this should work:

function isOverBin(item) {
    var bin = $("#recycleBin");
    var binPos = bin.offset(); binPos.right = binPos.left + bin.width(); binPos.bottom = binPos.top + bin.height();
    var itemPos = $(item).offset(); itemPos.right = itemPos.left + $(item).width(); itemPos.bottom = itemPos.top + $(item).height();

    return (itemPos.left <= binPos.left && binPos.left <= itemPos.right || itemPos.left <= binPos.right && binPos.right <= itemPos.right) &&
        (itemPos.top <= binPos.top && binPos.top <= itemPos.bottom || itemPos.top <= binPos.bottom && binPos.bottom <= itemPos.bottom);
}

$("#imageList li").mousemove(function() { $(this).toggleClass("indicateDeletionAction", isOverBin(this)); }).mouseup(function() {
    var item = this;
    if (isOverBin(item)) {
        window.setTimeout(function() {
            $(item).remove();
            $.ajax({ /* server notification of deletion */ });
        }, 0);
    }
});