dojo dnd

来源：互联网发布：php棋牌游戏开发构架编辑：程序博客网时间：2024/05/17 04:22

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/resources/dnd.css">

<link rel="stylesheet" href="css/claro.css">

<style type="text/css">
#dndOne {
width: 100px;
height: 100px;
position: absolute;
left:0;
top:0;
border: 1px solid #000;
background: red;
}

.dojoDndItem {
width: 100px;
height: 100px;
position: relative;
/*
left:50;
top:50; */
border: 1px solid #000;
background: red;
}

#dndTwo {
width: 100px;
height: 100px;
position: absolute;
left:120px;
top:120px;
border: 1px solid #000;
background: blue;
}

#dndArea {
height: 200px;
width: 400px;
position: absolute;
left:0px;
top:0px;
border: 1px solid #000;
}

#dndSurface {
width:600px;
height: 500px;
position: absolute;
left:300px;
top:300px;
border: 1px solid #000;
}
</style>
<script>
// Instead of using data-dojo-config, we’re creating a dojoConfig object
// *before* we load dojo.js; they’re functionally identical.
var dojoConfig = {
async: true,
// This code registers the correct location of the "demo" package
// so we can load Dojo from the CDN whilst still being able to
// load local modules
packages: [{
name: "demo",
location: location.pathname.replace(/\/[^/]*$/, '/js/demo')
}]
};

</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js"
data-dojo-config="async: true"></script>

<script>
///hello dojo!!
// Require the module we just created
require(["demo/myModule"], function(myModule){
// Use our module to change the text in the greeting
myModule.setText("greeting", "Hello Dojo!");

// After a few seconds, restore the text to its original state
setTimeout(function(){
myModule.restoreText("greeting");
}, 3000);
});
/////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////

require(["dojo/dnd/Source","dojo/dnd/Target","dojo/parser", "dojo/ready", "dojo/touch", "dojo/dom-construct","dojo/dom", "dojo/on", "dojo/domReady!"],
function (Source,Target,parser, ready,touch,domConstruct,dom,on){
var dndArea_container = dom.byId("dndArea");
var dndSurface_container = dom.byId("dndSurface");
//dndArea_container.insertNode(false,);
var source_con = new Source(dndArea_container, { copyOnly: true});
var target_con = new Target(dndSurface_container, {});

ready(function(){
parser.parse();
dojo.subscribe("/dnd/start",
function(source,nodes,iscopy){
console.debug(source);console.debug(nodes);console.debug(iscopy);
}
);// 注册开始事件，当拖放动作开始时，便会有输出
dojo.subscribe("/dnd/source/over",
function(source){
console.debug(source);
});// 注册鼠标滑过容器事件，当鼠标滑过容器的时候，便会有输出
dojo.subscribe("/dnd/drop/before",
function(source,nodes,iscopy){
console.debug(source);console.debug(nodes);console.debug(iscopy);
});// 注册结束前事件，当拖放动作接受前时，便会有输出
dojo.subscribe("/dnd/drop",
function(source,nodes,iscopy){
console.debug(source);
console.debug(nodes);
console.debug(iscopy);
console.debug("bad");
});// 注册结束事件，当拖放动作结束时，便会有输出
dojo.subscribe("/dnd/cancel", function(){
console.debug("cancel");
});// 注册取消事件，当拖放动作取消时，便会有输出
});
});
</script>
</head>
<body >

<div id="dndArea" style="z-index: 1" data-dojo-type="dojo/dnd/Source">

<h1 id="greeting">Hello</h1>
<div id="dndOne" style="z-index: 2">Hi, I am moveable when you
want to.</div>
<div id="dndTwo" style="z-index: 2">Hi, I am moveable when you
want to.</div>
<div id="a1" class="dojoDndItem" >Hi, I am moveable when you
want to.</div>
<div id="a2" class="dojoDndItem">Hi, I am moveable when you
want to.</div>
<div id="a3" class="dojoDndItem" >Hi, I am moveable when you
want to.</div>

<div id="a4" class="dojoDndItem" >Hi, I am moveable when you
want to.</div>

</div>

<div id="dndSurface" style="z-index: 1"></div>
</body>
</html>