javascript - Drag and drop picture to text and with double click to remove the text inside the box -
<!doctype html> <html lang="en"> <head> <meta charset=utf-8 /> <title>basic drag , drop</title> <style> #drop { min-height: 200px; width: 200px; border: 3px dashed #ccc; margin: 10px; padding: 10px; clear: left; } p { margin: 10px 0; } #triangle { background: url(images/triangle.jpg) no-repeat; } #square { background: url(images/square.gif) no-repeat; } #circle { background: url(images/circle.jpg) no-repeat; } #red { background: url(images/red.jpg) no-repeat; } #yellow { background: url(images/yellow.jpg) no-repeat; } #green { background: url(images/green.jpg) no-repeat; } .drag { height: 48px; width: 48px; float: left; -khtml-user-drag: element; margin: 10px; } </style> <script> var addevent = (function () { if (document.addeventlistener) { return function (el, type, fn) { if (el && el.nodename || el === window) { el.addeventlistener(type, fn, false); } else if (el && el.length) { (var = 0; < el.length; i++) { addevent(el[i], type, fn); } } }; } else { return function (el, type, fn) { if (el && el.nodename || el === window) { el.attachevent('on' + type, function () { return fn.call(el, window.event); }); } else if (el && el.length) { (var = 0; < el.length; i++) { addevent(el[i], type, fn); } } }; } })(); (function () { var pre = document.createelement('pre'); pre.id = "view-source" // private scope avoid conflicts demos addevent(window, 'click', function (event) { if (event.target.hash == '#view-source') { // event.preventdefault(); if (!document.getelementbyid('view-source')) { // pre.innerhtml = ('<!doctype html>\n<html>\n' + document.documentelement.innerhtml + '\n</html>').replace(/[<>]/g, function (m) { return {'<':'<','>':'>'}[m]}); var xhr = new xmlhttprequest(); // original source - rather rendered source xhr.onreadystatechange = function () { if (this.readystate == 4 && this.status == 200) { pre.innerhtml = this.responsetext.replace(/[<>]/g, function (m) { return {'<':'<','>':'>'}[m]}); prettyprint(); } }; document.body.appendchild(pre); // need sync? - think xhr.open("get", window.location, true); xhr.send(); } document.body.classname = 'view-source'; var sourcetimer = setinterval(function () { if (window.location.hash != '#view-source') { clearinterval(sourcetimer); document.body.classname = ''; } }, 200); } }); })(); </script> <style id="jsbin-css"> </style> </head> <body> <div class="drag" id="triangle" draggable="true"></div> <div class="drag" id="square" draggable="true"></div> <div class="drag" id="circle" draggable="true"></div> <div class="drag" id="red" draggable="true"></div> <div class="drag" id="yellow" draggable="true"></div> <div class="drag" id="green" draggable="true"></div> <div id="drop"></div> <script> function cancel(e) { if (e.preventdefault) { e.preventdefault(); } return false; } var dragitems = document.queryselectorall('[draggable=true]'); (var = 0; < dragitems.length; i++) { addevent(dragitems[i], 'dragstart', function (event) { // store id of element, , collect on drop later on event.datatransfer.setdata('text', this.id); }); } var drop = document.queryselector('#drop'); // tells browser *can* drop on target addevent(drop, 'dragover', cancel); addevent(drop, 'dragenter', cancel); addevent(drop, 'drop', function (e) { if (e.preventdefault) e.preventdefault(); // stops browser redirecting off text. this.innerhtml += '<p>' + e.datatransfer.getdata('text') + '</p>'; return false; }); </script> </body> </html> how double click remove text inside textbox using html5? having problem on how remove text out textbox in html5. things can drag , drop inside, want remove things inside have been dragged inside... having problem on removing item inside that.
try using this.
document.getelementbyid('selectid').ondblclick = function(){ alert(this.selectedindex);//remove text here };
Comments
Post a Comment