JQuery的拖放 - 可放開包含拖動

Question

我是很新的JQuery的，但我設法做我自己的一些事情。我有三個輸入字段和三個選項。可以將選項拖動到輸入字段中，但不能將兩個可拖動的元素拖放到一個可拖放元素中。

這完美的作品，如果你不通過droppables移動拖拽元素。但是，當你瀏覽一個可以拖拽的JQuery執行「out」事件時。我希望能夠解決我的問題，但沒有一個「輟學」事件。

（還有用「removeClass」功能的問題，因爲這是行不通的。當然，這是不是一個大問題...）。

$(function() { 
    var textbox; 

    $(".draggable").draggable({ 
     revert: function (event, ui) { 
      $(this).data("draggable").originalPosition = { 
       top: 0, 
       left: 0 
      }; 
      return !event; 
     }, 
    }); 

    $(".droppable").droppable({ 
     activeClass: "ui-state-hover", 
     hoverClass: "ui-state-active", 
     drop: function(event, ui) { 

      //check if droppabele contains draggable 
      if ($(this).data("containsDrop") === 0 || $(this).data("containsDrop") === undefined) { //doesn't contain 
       $(this).data("containsDrop", 1); 

       ui.draggable.position({ of: $(this), my: 'left top', at: 'left top' }); 
       textbox = this; 

       $(this).addClass("ui-state-highlight") 

      } else { //contains --> go back to options 
       ui.draggable.animate({ top: 0, left: 0 }, 'slow'); 
      } 
     }, 
     out: function (event, ui) { 
      $(this).data("containsDrop", 0); 
      $(textbox).removeClass("ui-state-highlight"); 
     } 
    }); 
}); 

我希望，一些可以在這個小提琴去看一下：提前http://jsfiddle.net/u7aJ7/10/

感謝。

Answer 1

我花了幾個小時，並制定了以下解決方案。

您可以在http://jsfiddle.net/s5057285/yx3gW/

if ($("div.draggable").length > 0) { 
    $("div.draggable").draggable({ 
     //callback 
     revert: function(droppableObj) { 
      if (droppableObj === false) { 
       //revert to original position 
       $(this).data("draggable").originalPosition = { 
        top: 0, 
        left: 0 
       }; 
       var textbox = $(this).data("droppable"); 
       $(textbox).width(74); 
       $(textbox).val(''); 
       $(this).removeClass("dropped"); 

       positionDraggables(); 

       return true; 
      } else { 

       positionDraggables(); 

       return false; 
      } 
     } 
    }); 
} 

if ($("div.draggable").length > 0) { 
    $("input.droppable").droppable({ 
     drop: function(event, ui) { 
      //postition of draggable is the same as droppable 
      ui.draggable.position({ 
       of: $(this), 
       my: 'left top', 
       at: 'left top' 
      }); 
      //text from draggable in textfield 
      $(this).draggable("widget").val(ui.draggable.text()); 
      //store the droppable in the draggable 
      ui.draggable.data("droppable", this); 
      ui.draggable.addClass("dropped"); 
      //change width and height to size of draggable 
      $(this).width(ui.draggable.width()); 
      $(this).height(ui.draggable.height()); 
     } 
    }); 
} 

function positionDraggables() { 
    var selects = $('body').find('div.options'); 
    selects.each(function(index, el) { 
     var children = el.children; 
     for (var i = 0; i < children.length; i++) { 
      var child = children[i]; 
      if ($(child).hasClass("dropped")) { 
       var textbox = $(child).data("droppable"); 
       $(child).position({ 
        of: $(textbox), 
        my: 'left top', 
        at: 'left top' 
       }); 
      } 
     } 
    }); 
}​ 

Answer 2

不是通過將dropcount存儲在數據中來保留dropcount，而是在drop事件中檢查該div的內容。

drop: function(event, ui) { 
    if ($(this).children('.draggable').length == 0) 
     ui.draggable.position({ of: $(this), my: 'left top', at: 'left top' }); 
     var targetElem = $(this).attr("id"); 
     textbox = this; 

     $(this).addClass("ui-state-highlight"); 

    } else { //contains --> go back to options 
     ui.draggable.animate({ top: 0, left: 0 }, 'slow'); 
    } 
}