使用this教程,我制作了简单的拖放式网络应用程序。但是我无法用DOM做到这一点。这是我的代码jsfinddle。它不适用于jsfiddle,但如果你下载它会。该脚本应放在div后面。当你解开<div class="column" draggable="true"><span>A</span></div>
时它会起作用(不是在jsfiddle中)。那我怎么能用DOM制作呢?
答案 0 :(得分:0)
假设您的意思是使用动态创建的元素进行拖动,我已经更新了您的jsfiddle。 http://jsfiddle.net/7c3v0s1s/6/我在执行更改时将代码包装在命名空间中。
HTML
<div class="containter">
<div id="columns"></div>
</div>
Javascript
var localNameSpace = {
dragSrcEl: null
, bindDraggables: function() {
var cols = document.querySelectorAll('#columns .column');
[].forEach.call(cols, function(col) {
col.addEventListener('dragstart', localNameSpace.handleDragStart, false);
col.addEventListener('dragenter', localNameSpace.handleDragEnter, false);
col.addEventListener('dragover', localNameSpace.handleDragOver, false);
col.addEventListener('dragleave', localNameSpace.handleDragLeave, false);
col.addEventListener('drop', localNameSpace.handleDrop, false);
col.addEventListener('dragend', localNameSpace.handleDragEnd, false);
});
}
, createDraggables: function() {
var colDiv = document.getElementById('columns');
var divC = document.createElement('div');
var spanC = document.createElement('span');
divC.className = 'column';
divC.draggable = 'true';
spanC.innerHTML = 'A';
divC.appendChild(spanC);
colDiv.appendChild(divC);
}
, handleDrop: function(e) {
if(e.stopPropagation){
e.stopPropagation();
}
if(dragSrcEl != this){
localNameSpace.dragSrcEl.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
}
return false;
}
, handleDragEnd: function(e) {
var cols = document.querySelectorAll('#columns .column');
this.style.opacity = 1;
[].forEach.call(cols, function(col){
col.classList.remove('over');
});
}
, handleDragEnter: function(e) {
this.classList.add('over');
}
, handleDragLeave: function(e) {
this.classList.remove('over');
}
, handleDragOver: function(e) {
if(e.preventDefault){
e.preventDefault();
}
e.dataTransfer.dropEffect = 'move';
return false;
}
, handleDragStart: function(e) {
this.style.opacity = 0.4;
localNameSpace.dragSrcEl = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
}
, init: function() {
var readyStateCheckInterval = setInterval(function() {
if (document.readyState === "complete") {
clearInterval(readyStateCheckInterval);
localNameSpace.createDraggables();
localNameSpace.bindDraggables();
}
}, 10);
}
};
localNameSpace.init();