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

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，并且能够可排序 和可放置。上面的代码能够相互拖和放下。例如，A内的元素可以拖动到A和B，B内的元素可以拖动到A和C以及C内的元素可以拖动到A和B>.

此外，这不是我想要的，我希望它是A内的元素，只能拖到元素C，也可以拖回到元素A，则B内的元素只能拖到元素C，也可以拖回到元素A

请指教，真的不知道:(

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

Answer 1

只需按正确的顺序连接可排序项:A 与 C、B 与 C、C 与 A。

查看更新的 jsfiddle:

added ids for the divs

http://jsfiddle.net/PWh2L/74/

再次更新，希望大家也能理解背后的逻辑: http://jsfiddle.net/PWh2L/85/