：
Code:
<!DOCTYPE HTML><HTML><Head> <Scriptsrc= "Jquery-min.js"></Script> <style>TD{width:100px;Height:80px;Border:1px solid #444;cursor:Pointer; }Div{background:#0094ff;padding:5px;Border:1px solid #444; } </style> <Scripttype= "Text/javascript"> $(function () { $("Div"). each (function () { This. Draggable= true; This. ondragstart= function(e) {e.datatransfer.setdata ("ID", e.target.id); }; This. Ondragend= function(e) {$ ("TD"). CSS ("background",""); } }) $("TD"). each (function () { This. OnDragEnter= function(e) {$ ( This). CSS ("background", "Yellow"); } This. OnDragOver= function(e) {e.preventdefault (); } This. OnDragLeave= function(e) {$ ( This). CSS ("background", ""); } This. OnDrop= function(e) {e.preventdefault (); $( This). Append ($ (document.getElementById (E.datatransfer.getdata ("ID")))); } }) }) </Script></Head><Body> <Table> <TR> <TD> <DivID= "Div1">1111111111</Div> </TD> <TD> <DivID= "Div2">222222222</Div> </TD> <TD> <DivID= "Div3">3333333333</Div> </TD> <TD> <DivID= "Div4">44444444444</Div> </TD> </TR> </Table></Body></HTML>
Pay attention to this sentence this= function (E) { E.preventdefault (); $ (this "id "
this). append ($ (document.getElementById (E.datatransfer.getdata ( " id The sentence would have been the following.
& nbsp; E.target.appendchild (document.getElementById (E.datatransfer.getdata ("id")));
If the above is found, in the drag div layer can be dragged to another div layer, which is the event to pass, the internet did not find a solution, so only to use the TD added method to solve the problem.
HTML5 dragging and dropping a database between cells in a table
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
