JQueryのドラッグアンドドロップ - ドロップ可能なものにはドラッグ可能なものが含まれています

Question

私はJQueryの新機能ですが、自分でいくつかのことをすることができました。私は3つの入力フィールドと3つのオプションを持っています。オプションは入力フィールドにドラッグできますが、1つのドロップ可能に2つのドラッグが存在することはできません。

drappablesをdrappablesの上に移動しないと完全に機能します。しかし、あなたがドロップ可能な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をデータに格納して、ドロップイベントでその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'); 
    } 
}