Обнаружение позиции с помощью перетаскивания и JQuery?

Question

Мне нужно знать, как определить положение перетаскиваемого объекта, в отличие от других элементов. Мне нужно определить, выпал ли предмет за пределы двух разных делений. (Я создаю стартовую страницу типа док-станции Mac, и мне нужно знать, как это сделать, чтобы я мог удалять значки, перетаскивая их с панели.)

Любая помощь будет принята с благодарностью.

Answer 1

Вы можете использовать комбинацию draggable и droppable из jquery ui. Настройте панель инструментов как сбрасываемую, а значки - как перетаскиваемые:

var deleteClass = 'deleteMe';

$('div.toolbar').droppable({
    out:function(event, ui){
        ui.draggable.addClass(deleteClass);
    },
    over:function(event,ui){
        ui.draggable.removeClass(deleteClass);
    }
});​​​​​​​​​​​​​​​​​​​​

$('div.icon').draggable({
    helper:'clone',
    revert:'valid',
    opacity:.5,
    stop: function(event,ui){
        if($(this).hasClass('deleteMe')){$(this).fadeOut();}
    }    
});

В основном работа в событиях. Вне и после событий отбрасываемой панели инструментов добавьте и удалите класс на значке, который мы можем использовать в качестве флага, чтобы знать, когда значок не находится над панелью инструментов. Событие остановки на перетаскиваемой иконке позволяет нам удалить иконку, если она не находится над панелью инструментов. Вы можете попробовать это с этим jsFiddle . Я уверен, что то же самое можно сделать с помощью виджета jquery ui sortable , чтобы вы также могли позволить своим пользователям переупорядочивать значки, если они этого захотят.