Question

我不知道如何解决这个问题：

我有3种容器：

1.- .global_container ：孩子可以是：.zona_completa，.zona_izquierda，.zona_derecha

2.- global_container_2col ：仅限儿童：.zona_izquierda

3.- global_container_1col ：仅限儿童：.zona_derecha

我应该从“global_container_2col”和“global_container_1col”转移到“global_container”

但如果该项目为“.zona_izquierda”，我应该只从“global_container”转到“container_container_2col”

和

如果项目是“.zona_derecha”，我应该只从“global_container”移动到“container_container_1col”。

HTML：

<div class="video_play_container">
  <span class="video_play" id="video_play"></span>
  <video width="100%" controls="controls" poster="http://7xoaon.com2.z0.glb.qiniucdn.com/s/p/product_v2/6ca/a9b/b7x/hsvb4000og0ck4ko4gkwwco8kg.jpg?imageMogr2/auto-orient/thumbnail/700x|watermark/3/image/aHR0cDovLzd4b2Fvbi5jb20yLnowLmdsYi5xaW5pdWNkbi5jb20vc2VlbG9nby5wbmc=/dissolve/100/gravity/SouthWest/dx/10/dy/10/text/5q-P5pel5LiAU2Vl/font/5b6u6L2v6ZuF6buR/fontsize/400/fill/I0VGRUZFRg==/dissolve/100/gravity/SouthWest/dx/50/dy/17">
    <source src="http://video.seecsee.com/2016/05/31/18/04e5a8230cf1f2605a66799033127c83.mp4">
  </video>
</div>

JS：

<div class="global_container_2col" data-type="global_container">
  <div class="zona_izquierda zone" data-type="zone">
  </div>
</div>
<div class="global_container_1col" data-type="global_container">
  <div class="zona_derecha zone" data-type="zone">
  </div>
</div>
<div class="global_container" data-type="global_container">
  <div class="zona_izquierda zone" data-type="zone">
  </div>
  <div class="zona_derecha zone" data-type="zone">
  </div>
  <div class="zona_completa zone" data-type="zone">
  </div>    
</div>

DEMO：https://jsfiddle.net/kwrx4182/3/

Answer 1

$('.global_container_2col').sortable(
{
    connectWith: '.global_container_2col, .global_container',
  items: '.zona_izquierda',
  items: 'div:not(.zona_derecha)'
});

$('.global_container_1col').sortable(
{
    connectWith: '.global_container_1col, .global_container',
  items: '.zona_derecha'
  ,items: 'div:not(.zona_izquierda)'
});

Answer 2

基于这个答案： https://jsfiddle.net/kwrx4182/7/

我们需要在sortable中使用“receive”事件，检查被拖动项目的类并恢复事件：

$('body').sortable(
{
  items: 'div[data-type="global_container"]'
});

$('.global_container').sortable(
{
  connectWith: 'div[data-type="global_container"]',
  items: 'div[data-type="zone"]'
});

$('.global_container_2col').sortable(
{
  connectWith: '.global_container_2col, .global_container',
  items: '.zona_izquierda',
  receive: function(ev, ui)
  {
      if(!ui.item.hasClass('zona_izquierda'))
      {
        ui.sender.sortable('cancel');
      }
  }
});

$('.global_container_1col').sortable(
{
  connectWith: '.global_container_1col, .global_container',
  items: '.zona_derecha',
  receive: function(ev, ui)
  {
      if(!ui.item.hasClass('zona_derecha'))
      {
        ui.sender.sortable('cancel');
      }
  }  
});

DEMO：SOURCE

jquery ui可分类连接的儿童类型

2 个答案: