1

这是一个小提琴：http: //jsfiddle.net/adMXj/

我有需要放入较小容器中的大型可拖动项目。当容器和​​项目的大小相似时这很好，但当它是一个大的可拖动元素时就不好了。

拖动后，我希望可拖动内容更改为“选定项目”。

你能帮我吗？

在这里自己尝试一下，并注意您的可拖放区域有多小，具体取决于您单击拖动的可拖动项目的位置。

在此处输入图像描述

这是我的 JS：

$('.items > li').draggable({
    revert: "invalid",
    helper: function(event) {
        var helperList = $('<ul class="draggable-helper">');
        if ($(this).is('.active')){
            helperList.append($(this).siblings('.active').andSelf().clone());
        } else {
            helperList.append($(this).clone());
        }
        return helperList;
    }
});

$('.drop-containers li').droppable({
    drop: function(event, ui) {
        console.log('dropped');
        var $this = $(this);
        var selectedObjects = new Array();
        if (ui.draggable.hasClass('active')) {
            console.log('active');
            // get all active items
            $('ul.items > li.active').each(function() {
                console.log($(this).attr('id'));
                selectedObjects.push($(this).attr('id'));
                $(this).remove();
            });
        } else {
            console.log('not active');
            selectedObjects.push(ui.draggable.attr('id'));
            ui.draggable.remove();
        }
        $this.append(', ' + selectedObjects.join(', '));
    }
});
4

2 回答 2

2

我已经通过更改可放置项目的容差来解决这个问题。

$('.drop-containers li').droppable({
  tolerance : 'pointer'
});

更改容差是一个很好的解决方案，因此您不必更改拖动对象的外观或可放置对象的外观。如果您想更轻松地放下可拖动的项目，请将容差更改为“指针”或“触摸”

Tolerance 指定用于测试可拖动对象是否悬停在可放置对象上的模式。可能的值：

  • "fit": Draggable 与 droppable 完全重叠。
  • “intersect”：（默认） Draggable 在两个方向上至少与 droppable 重叠 50%。
  • “pointer”：鼠标指针与 droppable 重叠。
  • "touch": Draggable 与 droppable 任意重叠。

http://api.jqueryui.com/droppable/#option-tolerance

于 2013-04-30T22:32:31.577 回答
2

我不完全确定，但我认为这是你的追求。请查看：http: //jsfiddle.net/XuZvA/1/

我正在使用拖动事件来修改helper对象。

于 2013-04-30T22:42:24.527 回答