Question

我尝试在浏览器窗口中使用具有固定位置的dojo moveable。不幸的是，每当我用鼠标移动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/

欢呼声， krater

Answer 1

位置：已修复和位置：绝对是浏览器用来确定元素定位方式的两种完全相反的方法。

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

希望现在您将理解为什么Dojo draggable需要将您的元素设置为绝对位置。这允许Dojo通过它的 top：和 left：属性可视地移动可拖动元素。

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

如果您在视觉上尝试完成的内容中添加更多详细信息，可能会有另一种解决方案。

Answer 2

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

一些pesudo代码

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

有关事件的更多信息，请访问：

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

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

Answer 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");
        });

dojo.dnd.moveable与position：fixed

3 个答案: