1 2 3 4 5 6 7 8
|
function dragstart_handler(ev) { console.log("dragStart"); ev.dataTransfer.setData("text/plain", ev.target.id); } <body> <p id="p1" draggable="true" ondragstart="dragstart_handler(event);">This element is draggable.</p> </body>
|
1 2 3 4 5 6
|
function dragstart_handler(ev) { // 添加拖拽数据 ev.dataTransfer.setData("text/plain", ev.target.id); ev.dataTransfer.setData("text/html", "<p>Example paragraph</p>"); ev.dataTransfer.setData("text/uri-list", "http://developer.mozilla.org"); }
|
1 2 3 4 5
|
function dragstart_handler(ev) { var img = new Image(); img.src = 'example.gif'; ev.dataTransfer.setDragImage(img, 10, 10); }
|
1 2 3 4
|
function dragstart_handler(ev) { // Set the drag effect to copy ev.dataTransfer.dropEffect = "copy"; }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14
|
function dragover_handler(ev) { // 这里必须阻止默认行为，否则没有效果 ev.preventDefault(); ev.dataTransfer.dropEffect = "move" } function drop_handler(ev) { ev.preventDefault(); // Get the id of the target and add the moved element to the target's DOM var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } <body> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div> </body>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
|
function dragstart_handler(ev) { ev.dataTransfer.setData("text/plain", ev.target.id); ev.dropEffect = "move"; } function dragover_handler(ev) { ev.preventDefault(); // Set the dropEffect to move ev.dataTransfer.dropEffect = "move" } function drop_handler(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } <body> <p id="p1" draggable="true" ondragstart="dragstart_handler(event);">This element is draggable.</p> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div> </body>
|
HTML5 drag & drop 拖拽与拖放简介
HTML5 拖放（Drag 和 Drop）详解与实例
DataTransfer
Drag and Drop API
