HTML5代码题,html5 拖拽练习题(示例代码)

width:120px;

height:50px;

border:1px solid #000;

}

table td div.dragDiv{

margin:3px;

border:1px solid #444;

padding:3px;

cursor:pointer;

}

我是要拖动的
我是第二个

请把 W3School 的图片拖放到矩形中：

//对表格中的DIV拖拽

var tempData = "";

$("table td div.dragDiv").each(function () {this.draggable = true;this.ondragstart =function (e) {if (this ==e.target) {

e.dataTransfer.setData("id", e.target.innerHTML);

tempData= this;

}

}

});

$("table td").each(function () {this.ondragover =function (e) {

e.preventDefault();

}this.ondrop =function (e) {if (this ==e.target) {

e.preventDefault();

e.target.appendChild(tempData);

tempData= "";

}

}

})//图片拖拽

function allowDrop(ev) {

ev.preventDefault();

}

function drag(ev) {

ev.dataTransfer.setData("Text", ev.target.id);

}

function drop(ev) {

ev.preventDefault();var data = ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

}