dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
84 lines (74 loc) • 3.22 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Drag And Drop - stress test</title>
<link rel="stylesheet" type="text/css" href="../../../../dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css" href="../../../../dojo/tests/dnd/dndDefault.css" />
<link rel="stylesheet" type="text/css" href="../../../../dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css" href="../../../../dijit/tests/css/dijitTests.css" />
<link rel="stylesheet" type="text/css" href="../../resources/dnd.css" />
<link rel="stylesheet" type="text/css" href="../resources/test_dnd.css" />
<script type="text/javascript" src="../../../../dojo/dojo.js"
data-dojo-config="parseOnLoad:true, isDebug:false"></script>
<script type="text/javascript">
dojo.require("dojox.mdnd.AreaManager");
dojo.require("dojox.mdnd.DropIndicator");
dojo.require("dojox.mdnd.AutoScroll");
dojo.require("dojox.mdnd.dropMode.VerticalDropMode");
dojo.require("dijit._base.manager");
var queryCount = location.search.match(/count=(\d*)/);
var count = (queryCount ? parseInt(queryCount[1]) : 10);
var init = function(){
//console.log("init");
var item = dojo.query(".item")[0];
clone(item, dojo.byId("area1"));
clone(item, dojo.byId("area2"));
clone(item, dojo.byId("area3"));
clone(item, dojo.byId("area4"));
var m = dojox.mdnd.AreaManager.areaManager();
m.areaClass = "dndArea";
m.dragHandleClass = "dragHandle";
m.init();
};
dojo.addOnLoad(init);
function clone(item, parentNode){
for(var i=1;i<=count;i++){
var clone = item.cloneNode(true);
clone.className = (i%2) ? "item" : "item2";
clone.id=dijit.getUniqueId("item");
var divHandle= clone.getElementsByTagName("div")[0];
divHandle.id = clone.id + "_" + dijit.getUniqueId("handle");
divHandle.innerHTML = divHandle.id;
parentNode.appendChild(clone);
}
}
</script>
<style type="text/css">
.item {
margin:10px;
background-color:#FFF;
border:solid 2px #BBB;
}
.item2 {
margin:10px;
background-color:#FFF;
border:solid 2px #FFF;
}
</style>
</head>
<body class="tundra">
Pass <code>?count=<i><b>10</b></i></code> in the query string to change the number of div for each column.<br><br>
<div id="area1" class="area dndArea container" style="left:0px; width:250px; min-height:400px;">
<div class="item">
<div class="title dragHandle">title</div>
<div>
<p>Proin aliquet accumsan nunc. Duis nec tortor. Aliquam erat volutpat. Fusce erat velit, fringilla vel, varius nec, rhoncus sed, quam. Morbi orci. In arcu dolor, tempor sit amet, mattis ac, dignissim sed, purus.</p>
</div>
</div>
</div>
<div id="area2" class="area dndArea container" style="left:270px; width:250px; min-height:400px;"></div>
<div id="area3" class="area dndArea container" style="left:540px; width:250px; min-height:400px;"></div>
<div id="area4" class="area dndArea container" style="left:810px; width:250px; min-height:400px;"></div>
</body>
</html>