Question

HTML A

<div class="template_menu1 droppable1 id="main_list1">

   <div class="draggable" id="superwear2_current">
       <span style="float:left" class="listing">
           <i class="fa fa-th-large"></i>
       </span>
   </div>

   <div class="draggable" id="superwear3_current">
      <span style="float:left" class="listing">
          <i class="fa fa-th-large"></i>
      </span>
   </div>       

</div>

HTML B

<div class="template_menu droppable" id="main_list">
   <div class="draggable" id="banner">
      <span style="float:left" class="listing">
          <i class="fa fa-th-large"></i>
      </span>
   </div>

   <div class="draggable" id="multitab">
      <span style="float:left" class="listing">
        <i class="fa fa-th-large"></i>
      </span>
   </div>
</div>

HTML C

<div class="site_template droppable droppable1" id="column_left">Left Column</div>

JAVASCRIPT

$( ".droppable,.droppable1" ).sortable({
    connectWith: '.droppable,.droppable1',
    revert: 200,
    tolerance:'pointer',
    start: function(){

    },
    stop: function(event,ui){

    },
    zIndex: 10
}).droppable({
    drop: function(ev, ui) {



     }
});

问题： 我试图创建3个 A，B，C 的框，能够可排序和可放置。上面的代码能够拖动和 drop 彼此。例如， A 中的元素可以拖动到 A 和 B ， B 中的元素可以拖动 A 和 C 以及 C 内的元素可以拖到 A 和 B

此外，这不是我想要的，我希望它内部的元素 A 只能拖动到元素C并且还可以拖回元素 A ，然后 B 中的元素只能拖动到元素 C ，也可以拖回元素 A

请告知，真的不知道:(

工作演示 http://jsfiddle.net/PWh2L/72/

Answer 1

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1,#div2,#div3 {
    width: 300px;
    height: 150px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}
p{float:left; width:50px; height:20px;}
</style>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    if(ev.target.id == "div3")
        ev.target.appendChild(document.getElementById(data));
    else if(data.substring(0,4) == ev.target.id)
        ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<p>A</p>
    <p id="div1Text1" draggable="true" ondragstart="drag(event)">Text11</p>
    <p id="div1Text2" draggable="true" ondragstart="drag(event)">Text12</p>
    <p id="div1Text3" draggable="true" ondragstart="drag(event)">Text13</p>
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<p>B</p>
    <p id="div2Text1" draggable="true" ondragstart="drag(event)">Text21</p>
    <p id="div2Text2" draggable="true" ondragstart="drag(event)">Text22</p>
    <p id="div2Text3" draggable="true" ondragstart="drag(event)">Text23</p>
</div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
<p>C</p>

</div>

</body>
</html>

Answer 2

只需按正确的顺序连接sortables：A与C，B与C和C与A。

请参阅更新的jsfiddle：

Invalid object

http://jsfiddle.net/PWh2L/85/

再次更新它，希望您也了解它背后的logis： {{3}}

Answer 3

使用accept选项：

<script>
    $(function() {
        $(".droppable").droppable({
            greedy : true,
            // accept from both draggable area 1 and draggable area 2
            accept : '#draggable1 .listing1, #draggable2 .listing2',
        });

        $("#draggable2").droppable({
            greedy : true,
            // accept only from itself
            accept : '#draggable2 .listing2',
        });

        $("#draggable1").droppable({
            greedy : true,
            // accept only from itself
            accept : '#draggable1 .listing1',
        });
    }); 
</script>

现场演示：https://jsfiddle.net/q4dbu9fh/

Jquery可以使用自己的元素进行排序和删除

3 个答案: