道场移动:限制移动到水平

Dojo Moveable : Limit Moving to horizontal

本文关键字:移动 水平      更新时间:2023-09-26

我正在阅读这个:http://dojotoolkit.org/reference-guide/1.9/dojo/dnd/Moveable.html但似乎这个指南里面有错误。自定义移动部件不工作!

我正在尝试开发标签。标签部分正在工作。现在我想让它们可以移动。但是我想限制可移动的部分,比如Firefox, Internet Explorer, Chrome等的标签,你只能左右移动它们。我不知道如何实现它。有谁能给我一些建议吗?

目前我已经做了一个测试HTML,其中包含2个DIV标签。如果将一个标签移动到第二个标签上,则将其放置在鼠标(带所选标签)所在标签的位置之后。应该用dojo制作。

<html>
    <head>
        <title>My Drag & Drop</title>
        <link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/default.css" type="text/css" />
        <link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/pygments.css" type="text/css" />
        <link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/css/site.css" type="text/css" />
        <link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/js/docs/resources/guide.css" type="text/css" />
        <link rel="stylesheet" href="dojo/dijit/themes/dijit.css" type="text/css" />
        <link rel="stylesheet" href="dojo/dijit/themes/claro/claro.css" type="text/css" />
        <script src="dojo/dojo/dojo.js"
            data-dojo-config="async: true"></script>
    </head>
    <body>
    <script type="text/javascript" >
        require(["dojo/_base/declare", "dojo/dnd/Mover", "dojo/dom", "dojo/dnd/Moveable","dojo/domReady!"],
function(declare, Mover, dom, Moveable){

  //Create your "Moveable" as
  var myMoveable = new Moveable(dom.byId("id1"));
});
    </script>
        <div id="id1" style="width:250; height:250; background-color:black; margin-right:10px; position: absolute; top: 10px; left:10px; margin-top:50px; margin-left:10px;margin-bottom: 10px;">test
        </div>
        <div id="id2" style="width:250; height:250; background-color:black; position: absolute; left: 200; margin-right:10px;margin-top:50px; margin-left:250px;margin-bottom: 10px;"> test
        </div>
    </body>
</html>

Thanks for Help

查看move.constrainedMoveable