I was reading this: http://dojotoolkit.org/reference-guide/1.9/dojo/dnd/Moveable.html but it seems that this Guide has errors inside it. Custom Mover Part is not working!
I am trying to develop Tags. The Tag Part is working. Now I want to make them moveable. But I want to limit the moveable part like the Tabs in Firefox, Internet Explorer, Chrome, etc. that you can only move them left and right. I have no Idea how to realize it. Any one can give me advices?
At the moment I have made a Test HTML which contains 2 DIV Tags. If you Move the one Tag over the second one it shall be placed AFTER the Tag which the mouse (with the selected Tag) is over. It shall be made with 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
Check out move.constrainedMoveable