使用jQuery綁定事件時,需e.originalEvent.dataTransfer.setData("obj_add",e.target.id);
<!DOCTYPE html><html> <head> <style type="text/CSS"> .backpack {width:400px;height:200px;border:1px solid #aaaaaa;} #div3 {width:200px;height:200px;border:1px solid #aaaaaa;} .item{ display:inline-block; background-color: antiquewhite; height: 25px; width: 50px; } </style> <meta charset="UTF-8"> <title></title> </head> <body> <div id="a" class="item" draggable="true">武器</div> <div id="b" class="item" draggable="true">衣服</div> <div id="c" class="item" draggable="true">鞋子</div> <div id="d" class="item" draggable="true">法寶</div> <div class="backpack" id="div1"><h4>人物屬性</h4></div> <div class="backpack" id="div2"><h4>背包</h4></div><br /> <div id="div3"><h5>上面兩個框的內容拖到此處可刪除</h5></div> <script src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> jQuery(function($) { //拖放開始:獲取id放入dataTransfer $(".item").on("dragstart",function(e){ e.originalEvent.dataTransfer.setData("obj_add",e.target.id); }); //允許放入 $("#div1").on("dragover",function(e){ e.originalEvent.PReventDefault(); }) //允許放入 $("#div2").on("dragover",function(e){ e.originalEvent.preventDefault(); }) //允許放入 $("#div3").on("dragover",function(e){ e.originalEvent.preventDefault(); }) //放下事件 $("#div1").on("drop",function(e){ e.originalEvent.preventDefault; var id = e.originalEvent.dataTransfer.getData("obj_add"); $(this).append($("#"+id)); //給新加入的元素添加拖放事件 $("#"+id).on("dragstart",function(e){ e.originalEvent.dataTransfer.setData("obj_remove",e.target.id); }); }) //放下事件 $("#div2").on("drop",function(e){ e.originalEvent.preventDefault; var id = e.originalEvent.dataTransfer.getData("obj_add"); $(this).append($("#"+id)); //給新加入的元素添加拖放事件 $("#"+id).on("dragstart",function(e){ e.originalEvent.dataTransfer.setData("obj_remove",e.target.id); }); }) //放下事件 用來刪除 $("#div3").on("drop",function(e){ e.originalEvent.preventDefault; var r = e.originalEvent.dataTransfer.getData("obj_remove"); $("#"+r).remove(); }) ; }); </script> </body></html>
新聞熱點
疑難解答
