拖动时将助手保持在鼠标下答案

【问题标题】：keep helper under mouse when dragging拖动时将助手保持在鼠标下
【发布时间】：2013-09-14 01:21:50
【问题描述】：

我正在尝试实现一些非常接近“可排序小部件”的功能，但我无法使用它，因为其他东西不适用于预制小部件。所以我试图用可拖放的元素重新创建它的功能：

$(".Element").draggable({
    helper: 'original',
    drag: function(event, ui) {

        ElementWidth = $(this).outerWidth(true);
        if($(this).prev().length){
            LeftElementWidth = $(this).prev().outerWidth(true);
            LeftElementLeftOffset = $(this).prev().offset().left;
            if(parseFloat(ui.offset.left+(ElementWidth/2)) < parseFloat(LeftElementLeftOffset+(LeftElementWidth/2))){
                $(this).prev().before($(this));
            }
        }

        if($(this).next().length){
            RightElementWidth = $(this).next().outerWidth(true);
            RightElementLeftOffset = $(this).next().offset().left;
            if(parseFloat(ui.offset.left+(ElementWidth/2)) > parseFloat(RightElementLeftOffset+(RightElementWidth/2))){
                $(this).next().after($(this));
            }
        }
    }
}); 

$("#Container").droppable({ accept: '.Element' });

它工作正常，除了当我将它的元素移动到下一个位置时，可拖动助手不会停留在鼠标光标下方。看看这个小提琴：

http://jsfiddle.net/5qFhg/15/

当您尝试对绿色框进行排序时，您会看到会发生什么。如何让助手保持在原位？

【问题讨论】：

你说你不想要“Sortable Widget”，但你决定使用“draggable”和“droppable”元素......为什么不使用“sortable”元素和一些那么自定义行为呢？ jQuery UI : Sortable
是的，究竟是什么阻止了您使用可排序小部件？您是否还希望能够将这些框垂直移动到红框之外。你想让它们在鼠标上移时捕捉到空白区域吗？

标签： javascript jquery html css jquery-ui

【解决方案1】：

http://jsfiddle.net/margaret_/XM6f8/1/

这就是你要找的吗？你可以使用淘汰赛吗？我无法添加 cmets，因为我没有 50 声望。

<a href="#" data-bind="text: name, click: function() { viewModel.selectTask($data); },     visible: $data !== viewModel.selectedTask()"></a>
<input data-bind="value: name, visibleAndSelect: $data === viewModel.selectedTask(), event: { blur: function() { viewModel.selectTask(''); } }" />

使用父位置和上一个位置来模拟函数。

ko.bindingHandlers.sortableList = {
init: function(element, valueAccessor, allBindingsAccessor, context) {
    $(element).data("sortList", valueAccessor()); //attach meta-data
    $(element).sortable({
        start: function(event, ui) {
            //track the original position of the element
            var parent = ui.item.parent();
            var prev = ui.item.prev();
            //create a function to move it back (if it has a prev sibling, insert after it, otherwise put it at the beginning)
            ui.item.moveItemBack = prev.length ? function() { ui.item.insertAfter(prev); } : function() { parent.prepend(ui.item); };
        },
        update: function(event, ui) {
            var item = ui.item.data("sortItem");
            if (item) {
                //identify parents
                var originalParent = ui.item.data("parentList");
                var newParent = ui.item.parent().data("sortList");

                //figure out its new position
                var position = ko.utils.arrayIndexOf(ui.item.parent().children(), ui.item[0]);

                if (position >= 0) {
                    //move the element back to its original position and let KO handle adding it to the new parent
                    if (originalParent !== newParent) {
                        ui.item.moveItemBack();
                    }

                    //place item in the proper position
                    newParent.remove(item);
                    newParent.splice(position, 0, item);
                }
            }
        },
        connectWith: '.container'
    });
}

您希望 div 并排显示吗？

【讨论】：