Jquery uiドラッグアンドドロップ

Question

6つのドロップ可能領域にドラッグ＆ドロップする6つのオプションがあります。ドロップ可能領域にドラッグされた要素が1つ以上存在してはなりません。削除可能な領域に既に要素があり、別の要素が削除されている場合は、存在していた要素を次の兄弟要素に移動する必要があります。

正確にjquery sortableのようにしたいと思いますが、これはドラッグアンドドロップ後も同様です。

fiddle demo here.

$(".qselected").sortable(); 
$(".qselected").disableSelection(); 

$(".qitem").draggable({ 
    containment : "#container", 
    helper : 'clone', 
    revert : 'invalid' 
}); 

$(".qselected, #qlist").droppable({ 
    hoverClass : 'ui-state-highlight', 
    drop : function(ev, ui) { 

    if($('.qselected div').length){ 
     //$('.qselected div').eq(0).remove().appendTo(); 
    } 
    $(ui.draggable).clone().appendTo(this); 
    $(ui.draggable).remove(); 

     $(".qitem").draggable({ 
      containment : "#container", 
      helper : 'clone', 
      revert : 'invalid' 
     }); 
    } 
}); 

Answer 1

ないあなたの説明に基づいて並べ替え可能な部分について確認を探すが、ここでドロップ可能に対処する一つの方法は次のとおりです。

例：http://jsfiddle.net/Twisty/s08pf0g9/

はJavaScript

$(document).ready(function() { 
    $(".qselected").sortable(); 
    $(".qselected").disableSelection(); 

    $(".qitem").draggable({ 
    containment: "#container", 
    revert: 'invalid' 
    }); 

    $(".qselected, #qlist").droppable({ 
    hoverClass: 'ui-state-highlight', 
    drop: function(ev, ui) { 
     var $item = ui.draggable.detach(); 
     var $target = $(ev.target); 

     if ($target.find(".qitem").length === 0) { 
     console.log("Target is empty, dropping here."); 
     $item.attr("style", ""); 
     $item.appendTo($target); 
     } else { 
     console.log("Target is full."); 
     $(".qselected").each(function(i, el) { 
      if ($(el).find(".qitem").length === 0) { 
      console.log("target " + i + " is empty, dropping here."); 
      $item.attr("style", ""); 
      $item.appendTo($(el)); 
      return false; 
      } 
     }); 
     } 
    } 
    }); 
}); 

最初に、ドラッグしたアイテムを切り離します。 2番目に、ターゲットに既に.qitemが含まれているかどうかを確認します。そうであれば、次の空きスロットを見つけます。

これはソート可能なようには機能しません。コメントで述べたように、空のソート可能なものをターゲットとして作成し、ユーザーがアイテム内でドラッグできるようにすることをお勧めします。私が何をしたいことはソート可能にドラッグすることだと思います

http://jsfiddle.net/Twisty/s08pf0g9/1/

$(document).ready(function() { 
    $("#sorting").sortable({ 
    items: "> div.qselected", 
    receive: function(e, ui) { 
     var $item = $(this).find(".ui-draggable"); 
     $item.removeClass("ui-draggable"); 
     $item.next().append($item); 
    } 
    }); 
    $("#sorting").disableSelection(); 

    $(".qitem").draggable({ 
    containment: "#container", 
    connectToSortable: "#sorting", 
    helper: 'clone', 
    revert: 'invalid' 
    }); 
});