javascript - 可在所有可能的地方放置

Question

我目前正在构建一个网站设计器，其中一个核心功能是能够拖放以重新排列元素。我已经在这个功能上工作了几天，并且已经失败了几次。关于此拖放系统最重要的注意事项是可拖动元素可以放在ma​​ster容器内的任何位置，并且会卡入到位 所以不会有绝对定位的元素，否则元素不会卡入到位。

首先，我首先构建核心可拖动位，您可以在其中拖动元素，然后当您放下元素时，我使用 document.elementFromPoint() 获取光标所在的元素位置是(注意:我必须隐藏可拖动元素，否则它会返回该元素)。

现在我有了离光标最近的元素，主要问题是确定可拖动元素相对于该元素需要去哪里，因为有 4 个选项 append - prepend - insertBefore - insertAfter。我已经设法让 append - prepend & insertBefore 工作，但它不够可靠，因为我要做的就是使用目标的高度和偏移量来确定 append 或 prepend我正在增加 getFromPoint 上的 Y 参数，以查看我是否在短距离内击中了不同的元素以确定 insertBefore。这是我到目前为止的代码。

box.addEventListener('mouseup', function (e) {
    if (!dragging) return;
    dragging = false;
    var thisEl = this; // the drag-able element

    // Hide 
    this.style.display = 'none'; // hide the element so we can get 
                                 // document.elementFromPoint

    var el = document.elementFromPoint(e.pageX, e.pageY), // target
        elH = el.offsetHeight, // height of target
        elT = el.offsetTop; // offset of target

    for (var i = 0; i < 15; i++) { // This is a weird part see the reference at the bottom
        var newEl = document.elementFromPoint(e.pageX, e.pageY + i);
        if (newEl !== el) {
            this.style.display = 'block';
            this.style.position = 'static';
            return newEl.parentNode.insertBefore(thisEl, newEl);
        }
    }

    if (e.pageY < elT + (elH / 2)) { // if the pageY is less than the target offset + half of the height, that's how I am calculating prepend
        el.appendChild(this);
        el.insertBefore(this, el.firstChild);
    } else {
        el.appendChild(this); // else append;
    }

    this.style.display = 'block';
    this.style.position = 'static'; // Snap back in with 'static'
});

这只是我的 mouseup 事件，它完成了所有工作。其他事件只是使元素可拖动，并不重要。

这是一个 fiddle

http://jsfiddle.net/mLX5A/2/

因此，如果那没有问这个问题，那么这是一个简短的版本。

我的可拖动元素需要能够放在任何地方并卡入。最好的方法是什么，因为我在 fiddle 中做的方式肯定不好。我如何检测元素相对于 mouseup 上的目标的位置。

引用奇怪的部分。

这是它的工作原理(警告，这不好)。当我使用 elementFromPoint 获取目标元素时，我会创建一个循环，该循环将循环 15 次并递增进入 elementFromPoint 的 Y 值，因此基本上 elementFromPoint 正在向下移动 15px，如果它在那个短空间内碰到一个新元素，我假设您想在目标之前插入该元素。

我非常高兴收到与此代码无关的答案，因为这也会使其他用户受益。

我想指出，可拖动的容器是设计器的主要部分。所以对我来说，拥有所有绝对定位的元素并不是一个选择，我真的不是一个好主意，把一个元素放在每个可能的地方，这样我就可以检测到可拖动元素必须去哪里，因为无论在什么地方该容器将是没有不必要内容的高质量结果。

我还想指出，我的应用程序不并且将不会支持旧浏览器，即IE6、IE7、IE8、IE9

Answer 1

我会考虑使用 jQuery UI 的 Sortable widget 。 <强> portlets example 处理 insertBefore和 insertAfter要求。我创建了一个简单的 fiddle 建立在 portlet 示例的基础上，也满足 prepend和 append要求。

这对您来说只是一个开始，我相信您可以根据需要进行操作。 connectWith 这很重要，具体取决于您希望放置东西的位置。

Fiddle

JS

$(".column").sortable({
    items: ".portlet",
    connectWith: ".column"
});
$(".portlet").sortable({
    items: ".portlet-content",
    connectWith: ".portlet"
});
$(".column").disableSelection();

HTML

<div class="column">
    <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
        <div class="portlet-content">One. Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
    <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
        <div class="portlet-content">Two. Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
    <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
        <div class="portlet-content">Three. Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
</div>
<div class="column">
    <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
        <div class="portlet-content">Four. Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
    <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
        <div class="portlet-content">Five. Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
</div>