dojo.dnd.moveable 位置：固定答案

【问题标题】：dojo.dnd.moveable with position:fixeddojo.dnd.moveable 位置：固定
【发布时间】：2012-10-16 00:36:06
【问题描述】：

我尝试在浏览器窗口中使用具有固定位置的可移动道场。不幸的是，每次我用鼠标移动 div 时，位置都设置为绝对值。我该怎么做才能使 div 固定？

html:

<html>
<body>

<div id="moveMe" style="position:fixed;width:100px;height:100px;border:1px solid black;background-color:#00ff00;cursor:pointer;">bla</div>
<p>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
</body>
</html>

脚本：

dojo.require("dojo.dnd.move");
dojo.ready(function(){

    var pcm = new dojo.dnd.move.boxConstrainedMoveable(dojo.byId("moveMe"), {
        box : dojo.window.getBox(),
        within : true
    });

});

测试链接： http://jsfiddle.net/zPVdX/

干杯，克拉特

【问题讨论】：

Dojo 1.8.0 不支持它，但我找到了一种快速而肮脏的修补方法：codenaschen.de/tichyblog/…

标签： javascript css dojo drag-and-drop

【解决方案1】：

position: fixed 和 position: absolute 是浏览器用来确定元素如何定位的两种完全相反的方法。

我首先建议阅读它们之间的差异：http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

希望现在您会明白为什么 Dojo 可拖动元素需要将您的元素设置为绝对位置。这允许 Dojo 通过其 top: 和 left: 属性直观地移动可拖动元素。

将此与静态定位进行比较，静态定位将尝试将您的元素锚定到相对于当前视口的位置。

如果您添加更多关于您在视觉上试图完成什么的细节，可能会有另一种解决方案。

【讨论】：

我读过，但我不明白有什么大的区别。我可以用顶部和左侧设置固定和绝对元素的位置。我看到的唯一区别是 fixed 不会随内容滚动，而 absolute 会滚动。看这里：jsfiddle.net/ss9ZZ 我想要的是我的示例中绿色框的行为，以及用鼠标移动框的可能性。

【解决方案2】：

您可以在 DND（可拖动元素）上使用事件 'MoveStop'，以便在拖动操作的 END 处强制添加 position: fixed;。通过这种方式，您可以使用position: absolute; 在您的元素周围拖动，并在拖动完成后使其具有固定位置。

一些伪代码

  yourDnd.on('MoveStop', function (e) {
        // Set position FIXED
        domStyle.set(this.node, {
            'position': 'fixed ',
        });
    });

有关活动的更多信息可以在这里找到：

http://livedocs.dojotoolkit.org/dojo/dnd

关于this hack 我不建议您更改 DOJO 库，因为您的更改可能不安全并在框架的其他部分产生错误。

【讨论】：

【解决方案3】：

我刚刚开始使用它：

        dnd.on('MoveStart', function (e) {
            var p = dojo.position(e.node, true);
            var parent_position = dojo.position(e.node.parentNode, true)

            dojo.style(e.node, "top", p.y - parent_position.y + "px");
            dojo.style(e.node, "position", "absolute");
        });
        dnd.on('MoveStop', function (e) {
            var p = dojo.position(e.node, false);
            dojo.style(e.node, "top", p.y + "px");
            dojo.style(e.node, "position", "fixed");
        });

【讨论】：