Question

我想将一个可排序的最多4个项目拖动到另一个可排序的项目。我该怎么做？我正在使用this script。

以下是我的代码：

<div class="row-fluid">
   <div class="span6">
      <ol class="simple_with_animation vertical">
        <li>Sharlon</li>
        <li>Biliosa</li>
            <li>Sharlon</li>
        <li>Biliosa</li>
            <li>Sharlon</li>
        <li>Biliosa</li>
      </ol>
   </div>
   <div class="span6">
     <ol class="simple_with_animation vertical highlightmenu">
        <li class="highlight">Item One</li>
        <li class="highlight">Item Two</li>
                <li class="highlight">Item One</li>
        <li class="highlight">Item Two</li>
                <li class="highlight">Item One</li>
        <li class="highlight">Item Two</li>
     </ol>
   </div>
</div>

//This activalion for drug list

var adjustment

$("ol.simple_with_animation").sortable({
    group: 'simple_with_animation',
    pullPlaceholder: false,
    // animation on drop
    onDrop: function (item, targetContainer, _super) {
        var clonedItem = $('<li/>').css({
            height: 0
        })
        item.before(clonedItem)
        clonedItem.animate({
            'height': item.height()
        })

        item.animate(clonedItem.position(), function () {
            clonedItem.detach()
            _super(item)
        })
    },

    // set item relative to cursor position
    onDragStart: function ($item, container, _super) {
        var offset = $item.offset(),
            pointer = container.rootGroup.pointer

            adjustment = {
                left: pointer.left - offset.left,
                top: pointer.top - offset.top
            }

        _super($item, container)
    },
    onDrag: function ($item, position) {
        $item.css({
            left: position.left - adjustment.left,
            top: position.top - adjustment.top
        })
    }
});

//This activation for drug list - drug list
var oldContainer
$("ol.nested_with_switch").sortable({
    group: 'nested',
    afterMove: function (placeholder, container) {
        if (oldContainer != container) {
            if (oldContainer) oldContainer.el.removeClass("active")
            container.el.addClass("active")

            oldContainer = container
        }
    },
    onDrop: function (item, container, _super) {
        container.el.removeClass("active")
        _super(item)
    }
});

Answer 1

没有直接的方法可以执行此操作，因此您必须实现绑定到onDrop事件的函数。

当此事件触发时，您必须获取可排序列表中所有<li>个元素的计数。如果计数小于最大值4，则允许接收事件继续。否则，触发cancel方法。

$("ol.nested_with_switch").sortable({

  ... //previous code

  over : function(event, ui){

    if ($("ol.nested_with_switch li").length > 4){
      $("ol.nested_with_switch").sortable("cancel);
    } 
  } 
});

如何添加拖动限制以进行排序

1 个答案: