2

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

干杯，克拉特

4

3 回答 3

0

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

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

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

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

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

于 2012-10-16T00:43:14.270 回答
0

我刚刚得到这个工作：

        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");
        });
于 2021-02-14T03:35:22.317 回答
0

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

一些伪代码

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

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

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

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

于 2015-10-27T11:01:53.813 回答