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>

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

1 个答案: