dojo.dnd.可随位置移动：固定

xu3bshqb 于 2022-12-08 发布在 Dojo

关注(0)|答案(3)|浏览(166)

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

dojo

来源：https://stackoverflow.com/questions/12905958/dojo-dnd-moveable-with-positionfixed

3条答案

按热度按时间

nhhxz33t1#

位置：固定 * 和 * 位置：absolute* 是浏览器用来确定元素定位方式的两种完全相反的方法。

我首先建议您阅读一下它们之间的区别：http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
希望现在您能理解为什么Dojo draggable需要将元素设置为绝对位置，这允许Dojo通过其 top： 和 left： 属性可视地移动可拖动元素。
将此与静态定位进行比较，静态定位会尝试将元素锚到相对于当前视口的位置。
如果你在视觉上试图完成的事情上添加更多的细节，可能会有另一种解决方案。

赞(0）回复(0）举报 2022-12-08

uinbv5nw2#

您可以在DND（可拖动元素）上使用'MoveStop'事件，以便在拖动操作结束时强制添加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库，因为您的更改可能不安全，并在框架的其他部分创建bug。

赞(0）回复(0）举报 2022-12-08

zdwk9cvp3#

我刚得到这个工作与：

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

赞(0）回复(0）举报 2022-12-08

我来回答

dojo.dnd.可随位置移动：固定

3条答案

相关问题

热门标签

最新问答