javascript - Stuck in HTML5 Drag and Drop program -
i learning html5 unfortunately stuck in example. code executing problem drag , drop function not working. pasting code here. please check if find bug please tell me.
thanx in advance :)
<!doctype html> <html> <head> <style type="text/css"> #boxa, #boxb { float:left;padding:10px;margin:10px; -moz-user-select:none; } #boxa { background-color: #6633ff; width:75px; height:75px; } #boxb { background-color: #ff6699; width:150px; height:150px; } </style> <script type="text/javascript"> function dragstart(ev) { ev.datatransfer.effectallowed='move'; ev.datatransfer.setdata("text", ev.target.getattribute('id')); ev.datatransfer.setdragimage(ev.target,0,0); return true; } </script> </head> <body> <center> <h2>drag , drop html5 demo</h2> <div>try drag purple box around.</div> <div id="boxa" draggable="true" ondragstart="return dragstart(event)"> <p>drag me</p> </div> <div id="boxb">dustbin</div> </center> </body> </html>
the box drag around there no dragover or drop function defined of course. here version created while learning it. it's bit more advanced allows specify can drop each draggable element.
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style type="text/css"> .box { width: 350px; height: 70px; padding: 10px; margin-bottom: 10px; border: 1px solid #aaaaaa;} .obj { width: 220px; font-family: verdana, arial, sans-serif; font-size: 8pt; border: 2px solid #808080; border-radius: 4px; padding: 8px;} #dragapp { background: #bbffbb;} #dragany { position: absolute; left: 450px; top: 10px; background: #ffbbbb;} #dragbox { position: absolute; right: 10px; top: 10px; background: #bbbbff;} </style> <script> function ge$(d) { var x = document.getelementbyid(d); if (!x) { var y = document.getelementsbyname(d); if (y.length>0) x = y[0]; } return x; } function addeventhandler(elem,eventtype,handler) { if (elem.addeventlistener) elem.addeventlistener(eventtype,handler,false); else if (elem.attachevent) elem.attachevent('on'+eventtype,handler); } function removeeventhandler(elem,eventtype,handler) { if (elem.removeeventlistener) elem.removeeventlistener(eventtype,handler,false); if (elem.detachevent) elem.detachevent('on'+eventtype,handler); } function stopbubble(e) { var evt = e ? e : window.event; if (evt.stoppropagation) evt.stoppropagation(); if (evt.cancelbubble!=null) evt.cancelbubble = true; } function stopdefault(e) { var evt = e ? e : window.event; if (evt.preventdefault) evt.preventdefault(); evt.returnvalue = false; return false; } dragobj = []; dragbox = []; dragapp = []; dragitm = ''; setdrag = function(idobj, idbox, appchild) { if (dragobj.indexof(idobj) == -1) { var obj = ge$(idobj); obj.draggable = true; addeventhandler(obj,'dragstart',drag_start,false); addeventhandler(obj,'dragend',drag_end,false); obj.style.cursor = 'move'; } if (dragbox.indexof(idbox) == -1) { var box = (idbox == 'body' ? document.body : ge$(idbox)); addeventhandler(box,'dragover',drag_over,false); addeventhandler(box,'drop',drag_drop,false); } var = dragobj.length; dragobj[i] = idobj; dragbox[i] = idbox; dragapp[i] = !!appchild; } function drag_start(e) { var evt = e ? e : window.event; this.style.opacity = 0.33; dragitm = this.id; var offsets = this.getboundingclientrect(); evt.datatransfer.setdata("text", (offsets.left-evt.clientx) + ',' + (offsets.top-evt.clienty)); evt.datatransfer.effectallowed = 'move'; } function drag_end(e) { this.style.opacity = 1.0;} function drag_over(e) { var evt = e ? e : window.event; var idobj = dragitm; var idbox = (evt.currenttarget == document.body ? 'body' : evt.currenttarget.id); var fnd = false; (var i=0, len=dragobj.length; i<len; i++) { if (dragobj[i] == idobj && dragbox[i] == idbox) { fnd = true; break; } } if (fnd) { evt.datatransfer.dropeffect = 'move'; stopdefault(evt); stopbubble(evt); } else { evt.datatransfer.dropeffect = 'none'; } } function drag_drop(e) { var evt = e ? e : window.event; var idobj = dragitm; var idbox = (evt.currenttarget == document.body ? 'body' : evt.currenttarget.id); var fnd = false; (var i=0, len=dragobj.length; i<len; i++) { if (dragobj[i] == idobj && dragbox[i] == idbox) { fnd = true; var app = dragapp[i]; break; } } if (fnd) { var obj = ge$(idobj); if (app) { evt.currenttarget.appendchild(obj); } else { var params = evt.datatransfer.getdata("text").split(','); obj.style.left = (evt.clientx + parseint(params[0],10)) + 'px'; obj.style.top = (evt.clienty + parseint(params[1],10)) + 'px'; } stopdefault(evt); stopbubble(evt); } } if (!array.prototype.indexof) { array.prototype.indexof = function(value) { (var i=0, len=this.length; i<len; i++) { if (this[i] === value) return i; } return -1; } } </script> </head> <body> <div id="box1" class="box"></div> <div id="box2" class="box"></div> <div id="dragapp" class="obj">this 1 appends either box.</div> <div id="dragany" class="obj">this 1 can dragged anywhere.</div> <div id="dragbox" class="obj">this 1 can go in top box.</div> <p>i decided html5 drag , drop. found several examples online, none seemed provide validation of items being dragged except when dropped. created page example of how it.</p> <p>note example built page won't work in ie9 i've set div elements drag, ie9 supports img , a-href elements.</p> <p>i wrapped whole thing in setdrag function takes in ids of object dragged , location can dropped. if drop completed appending object child third argument should set true.</p> <p>there 7 events involved in dragging , dropping:</p> <pre> object dragstart when object first moved drag while object being moved dragend when object dropped target dragenter when object enters target dragover while object on target dragleave when object leaves target drop when object dropped </pre> <p>the dragstart/dragend events useful changing object appearance, , initialling cursor types , obect data in datatransfer. drag event isn't used here.</p> <p>i don't use dragenter/dragleave events. drop event 1 handles moving of object changing position/dom location. key dragover event determines drop can made. default not allow drop unless performs stopdefault() no drop allowed.</p> <br> <p>there <b>gotchas:</b></p> <p>in ie dragover can't use either or datatransfer access object info. id of object in dragover need set variable in dragstart.</p> <p>in object events can use event.target object (same this) in target events have use event.currenttarget (same this) instead.</p> <p>ff doesn't need initialise effectallowed ie does. i'm not use if setting cursor 'none' required or not.</p> <p>because of event bubbling (i think) still need validate combination of object/target in drop event.</p> <script> setdrag('dragapp','box1',true); setdrag('dragapp','box2',true); setdrag('dragany','body'); setdrag('dragbox','box1'); </script> </body> </html> 
Comments
Post a Comment