Question

我已经在我的网页上启用了拖放表格行（下面的代码）。不幸的是，当我使用{ revert: invalid }时，该行返回其原始位置，但略有偏移。它看起来大约是5px向下和向右。当我克隆整个表行时，这看起来很奇怪。任何人都可以提出任何理由吗？

function setupDragDrop(source, target) {
    source.draggable({
        revert: 'invalid',
        opacity: 0.9,
        cursor: 'move',
        helper: function(event) {
            var target = $(event.target).closest('tr');
            var target_children = target.children();

            var clone = target.clone();

            clone.children().width(function(i,val) {
                return target_children.eq(i).width();
            });

            return $('<div class="configbox drag-row"><table class="lanes"></table></div>')
                .find('table').append(clone).end();
        },
        start : function() {
            //this.style.display="none";
        },
        stop: function() {
            //this.style.display="";
        },
        appendTo: 'body'
    });

    target.droppable({
        drop: function(event, ui) {
            $(this).parent().append(ui.draggable);
        },
        accept: source.selector
    });
}

Answer 1

作为解决方法我改变了恢复功能以改变原始起始位置以解决奇怪的偏移，如下所示：

revert: function (event, ui) {
    //overwrite original position
    $(this).data("draggable").originalPosition = {
        top: $(this).data("draggable").originalPosition.top - 9,
        left: $(this).data("draggable").originalPosition.left - 9
    };
    return !event;
},

jQuery UI Draggable：不会恢复到原始位置

1 个答案: