使用Html5和Js进行拖动
function init() {
var source = document.getElementById("dragme");
var dest = document.getElementById("text");
source.addEventListener("dragstart", function(ev) {
<script type="text/javascript">
var dt = ev.dataTransfer;
dt.effectAllowed = 'all';
dt.setData("text/plain", "拖动");
}, false);
dest.addEventListener("dragend", function(ev) {
ev.preventDefault();
}, false);
dest.addEventListener("drop", function (ev) {
var dt = ev.dataTransfer;
var text = dt.getData("text/plain");
dest.textContent += text;
ev.preventDefault();
ev.stopPropagation();
}, false);
}
document.ondragover = function(e) { e.preventDefault(); };
document.ondrop = function(e) { e.preventDefault(); };
var source = document.getElementById("dragme");
var dest = document.getElementById("text");
source.addEventListener("dragstart", function(ev) {
<script type="text/javascript">
var dt = ev.dataTransfer;
dt.effectAllowed = 'all';
dt.setData("text/plain", "拖动");
}, false);
dest.addEventListener("dragend", function(ev) {
ev.preventDefault();
}, false);
dest.addEventListener("drop", function (ev) {
var dt = ev.dataTransfer;
var text = dt.getData("text/plain");
dest.textContent += text;
ev.preventDefault();
ev.stopPropagation();
}, false);
}
document.ondragover = function(e) { e.preventDefault(); };
document.ondrop = function(e) { e.preventDefault(); };
</script>
<body onload="init()">
<div id="dragme" draggable="true" style="width: 200px;border: 1px solid gray">请拖放</div>
<div id="text" style="width: 200px; height: 200px;border: 1px solid gray"></div>
</body>
