Question

我想将三个项目拖动到一个放置点。每个项目都将隐藏在drop上，并显示/将不同的隐藏div添加到drop parent。

我可以让拖拽机制降低，但是根据丢弃的内容让接受/触发不同的事件是我遇到问题的地方。

$(function(){
    $(".drag-item-1").draggable();
    $(".drag-item-2").draggable();
    $(".drag-item-3").draggable();
    $(".first-row").droppable();
});

Answer 1

定义一个drop函数并在那里实现该逻辑：

$( ".first-row" ).droppable({
  drop: function( event, ui ) {
    if (ui.draggable.hasClass("drag-item-1")){
      $(this).css("background-color","red");
    } else if (ui.draggable.hasClass("drag-item-2")){
        $(this).css("background-color","blue");
    } else {
        $(this).css("background-color","green");
    }
  }
});

http://api.jqueryui.com/droppable/#event-drop

拖放 - 识别并更改要删除的项目？

1 个答案: