jQuery UI放在空容器/列表上不起作用 [英] jQuery UI drop on empty container/list not working

问题描述

我对jQuery UI可排序小部件有问题.我根本无法将任何物品放在空容器中.当容器中有物品时，它可以完美地工作. 我这样称呼小部件:

I have a problem with the jQuery UI sortable widget. I simply can't drop any item on an empty container. When the container has an item it works perfectly. I call the widget like this:

$(".apc_row--columns", this.$el).sortable({
    placeholder: 'apc_drop-placeholder-blocked',
    forcePlaceholderSize: true,
    items: '.apc_inner_item',
    connectWith: ".apc_column--content",
    tolerance: "pointer",
    handle: '.move_handle',
    helper: "clone",
    dropOnEmpty: true,
    distance: 0.5,
    stop: function(event, ui){
        that.droppedItem(ui.item, ui.item.index());
    }
});

搜索发现连接的列表/容器需要填充/最小高度，因此jQuery可以正确计算位置.

Searching found out that the connected list/container needs a padding/min-height so jQuery could calculate the position correctly.

但是连接的div".apc_column--content"具有最小高度和填充.我还测试了将带有"display:none"的项目放在容器上，但这无济于事.

But the connected div ".apc_column--content" has a min-height and also a padding. I also tested to put an item with "display:none" on the container but that didn't help.

我只是无法使它正常工作(在所有浏览器上都经过测试)，因此非常感谢您的帮助！

I just cannot get it to work (tested all browsers) and would really appreciate any help!

谢谢.

针对该问题制作了jsfiddle: http://jsfiddle.net/Sf5QW/1/

Made a jsfiddle for the problem: http://jsfiddle.net/Sf5QW/1/

如果将所有项目从左侧列表移到右侧(或以其他方式)，则不能将任何项目移至空白列表.

If you move all items from the left list to the right (or other way) you can't move any item to the empty list.

推荐答案

工作场所

基本上，您是在错误的元素上设置了可排序对象.我将其更改为.apc_column--content元素，现在它可以工作了.由于两个列表都具有该类，因此我还必须将connectWith属性也更改为该类.

Basically, you were setting the sortable on the wrong element. I change it to the .apc_column--content element and now it works. Since both lists have that class I also had to change the connectWith property to that as well.

干杯.

$(".apc_column--content").sortable({
            placeholder: 'apc_drop-placeholder-blocked',
            forcePlaceholderSize: true,
            items: '.apc_inner_item',
            connectWith: ".apc_column--content",
            tolerance: "pointer",
            dropOnEmpty: true,
            distance: 0.5,
            stop: function(event, ui){
                // that.droppedItem(ui.item, ui.item.index());
            }
});

这篇关于jQuery UI放在空容器/列表上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！