jquery ui 可按 children 类型排序

Question

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

我有 3 种容器：

1.- .global_container: children 可以是: .zona_completa, .zona_izquierda, .zona_derecha

2.- global_container_2col: children 只能是: .zona_izquierda

3.- global_container_1col: children 只能是: .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="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>

JS:

$('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'
});

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

演示：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

基于这个答案： Prevent drop of list item in JqueryUI sortable

我们需要在 sortable 中使用 "receive" 事件，检查被拖动的项目的 class 并还原事件：

$('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');
      }
  }  
});

演示：https://jsfiddle.net/kwrx4182/7/

jquery ui 可按 children 类型排序

jquery ui sortable connecwith by children type

javascript

jquery

jquery-ui

jquery-ui-sortable