jQuery可从一个容器拖动元素到另一个容器

Question

我的目标是让两个单独的容器相邻。左边的容器将包含一个可拖动元素的大列表。正确的容器将包含几个相应的固定高度和宽度块，左侧的元素可以拖入其中。

我现在有这种工作，但它是非常有问题的，而且很坦率地不能很好地工作。我制作了一个名为drop的容器，其中有几个divs，它们被禁止排序。不过，我不得不在被禁用的div内嵌入一个嵌套的div，这样我才能将对象拖到每个块中。我实际上可以通过给sub-container（被禁用的div里面的嵌套div一个高度和宽度来提高可用性）

看看这个jsfiddle看看我的意思（注意：右边的块应该能够接受多种元素，例如：bullets右边应该能有从拖进它的左边bullet1, bullet2 and bullet3）

希望这是有道理

下面是一些代码：。

<div id="wrapper"> 
    <div id="origin" class="fbox"></div> 
    <div id="drop" class="fbox"></div> 
</div> 

的javascript：

var origin = document.getElementById('origin'); 
var drop = document.getElementById('drop'); 
var listOf = ['sku', 'product-name', 'category', 'short-description', 'description', 'price']; 
var firstRow = ['sku', 'product-name', 'category', 'short-description', 'description', 'price']; 
for (var y in listOf) { 

    var newSub = document.createElement('div'); 
    newSub.setAttribute('class', 'sub-container'); 
    newSub.id = listOf[y]; 

    var newBlock = document.createElement('div'); 

    newBlock.setAttribute('class', 'ui-state-disabled field-container'); 
    newBlock.innerHTML = listOf[y]; 
    newBlock.appendChild(newSub); 
    drop.appendChild(newBlock); 
} 

for (var i in firstRow) { 
    if (firstRow[i] != null) { 
     var newDiv = document.createElement('div'); 
     newDiv.id = i; 
     newDiv.setAttribute('class', 'draggable'); 
     newDiv.innerHTML = firstRow[i]; 
     origin.appendChild(newDiv); 
    } 
} 

$("#origin").sortable({ 
    connectWith: "#drop" 
}); 
$("#origin div").disableSelection(); 
$("#drop").sortable({ 
    connectWith: "#origin", 
    items: "div:not(.ui-state-disabled)" 
}); 

Answer 1

我希望我理解你的问题，我建议你为所有链接sortable框中设置一个类名。它很简单，其余的只是CSS。

请看：JSnippet DEMO

的jQuery：

$(function(){ 

    $('.sortme').sortable({ 
     connectWith: '.sortme' 
    }).disableSelection(); 

}); 

HTML：

<div id='elePool' class='sortme'> 
    <div>Pizza</div> 
    <div>Fiat</div> 
    <div>Jeep</div> 
    <div>Cat</div> 
    <div>Dog</div> 
</div> 
<div id='eleGroups'> 
    <div class='sortme group group-food'></div> 
    <div class='sortme group group-cars'></div> 
    <div class='sortme group group-animals'></div> 
</div>