javascript - Drag and drop in multiple browser windows / tabs -
wrote code drag , drop elements other elements. works fine.
var currentdragelement = null; var draggableelements = document.queryselectorall('[draggable="true"]'); [].foreach.call(draggableelements, function(element) { element.addeventlistener('dragstart', handledragstart, false); element.addeventlistener('dragenter', handledragenter, false); element.addeventlistener('dragover', handledragover, false); element.addeventlistener('dragleave', handledragleave, false); element.addeventlistener('drop', handledrop, false); element.addeventlistener('dragend', handledragend, false); }); function handledragstart(event) { currentdragelement = event.target; event.datatransfer.setdata("text/plain", event.target.dataset.uuid); } function handledragover(event) { event.preventdefault(); event.datatransfer.dropeffect = 'move'; return false; } function handledragenter(event) { this.classlist.add('over'); } function handledragleave(event) { this.classlist.remove('over'); } function handledrop(event) { event.stoppropagation(); event.preventdefault(); if(currentdragelement == event.target) { return; } console.log('dragged element ', currentdragelement.dataset.uuid , ' on element ', event.target.dataset.uuid) return false; } function handledragend(event) { [].foreach.call(draggableelements, function (element) { element.classlist.remove('over'); }); }section { border: solid 5px green; margin: 20px; float: left; width: 40%; } [draggable="true"]:hover { opacity: 0.6; } [draggable="true"] { cursor: move; background-color: #acacac; padding: 10px; margin: 10px; } .over[draggable="true"] { background-color: orange; }<section> <div draggable="true" data-uuid="1.1">draggable 1.1</div> <div draggable="true" data-uuid="1.2">draggable 1.2</div> <div draggable="true" data-uuid="1.3">draggable 1.3</div> </section> <section> <div draggable="true" data-uuid="2.1">draggable 2.1</div> <div draggable="true" data-uuid="2.2">draggable 2.2</div> <div draggable="true" data-uuid="2.3">draggable 2.3</div> </section>but want ability have 2 open windows same browser , drag , drop draggable="true" elements 1 window other.
as code not work because
var currentdragelement = null; remains null if draging other window/tab. question how can drag start element if started in other window or tab of same browser? want console state same if dragging different windows if drag , drop in same window.
please no jquery answers, helping!
as @mouser pointed out localstorage trick without ajax request or like..
tested in google chrome only
the use of localstorage not permitted in fiddles if wants try out copy following file save it, open in 2 browser windows , have fun drag , drop
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>drag - drop - demo</title> <style> section { border: solid 5px green; margin: 20px; float: left; width: 40%; } [draggable="true"]:hover { opacity: 0.6; } [draggable="true"] { cursor: move; background-color: #acacac; padding: 10px; margin: 10px; } .over[draggable="true"] { background-color: orange; } </style> </head> <body> <section> <div draggable="true" data-uuid="1.1">draggable 1.1</div> <div draggable="true" data-uuid="1.2">draggable 1.2</div> <div draggable="true" data-uuid="1.3">draggable 1.3</div> <div draggable="true" data-uuid="1.4">draggable 1.4</div> <div draggable="true" data-uuid="1.5">draggable 1.5</div> </section> <section> <div draggable="true" data-uuid="2.1">draggable 2.1</div> <div draggable="true" data-uuid="2.2">draggable 2.2</div> <div draggable="true" data-uuid="2.3">draggable 2.3</div> <div draggable="true" data-uuid="2.4">draggable 2.4</div> <div draggable="true" data-uuid="2.5">draggable 2.5</div> </section> <script> var draggableelements = document.queryselectorall('[draggable="true"]'); [].foreach.call(draggableelements, function(element) { element.addeventlistener('dragstart', handledragstart, false); element.addeventlistener('dragenter', handledragenter, false); element.addeventlistener('dragover', handledragover, false); element.addeventlistener('dragleave', handledragleave, false); element.addeventlistener('drop', handledrop, false); element.addeventlistener('dragend', handledragend, false); }); function handledragstart(event) { localstorage.setitem('currentdragelement', event.target.dataset.uuid); event.datatransfer.setdata("text/plain", event.target.dataset.uuid); } function handledragover(event) { event.preventdefault(); event.datatransfer.dropeffect = 'move'; return false; } function handledragenter(event) { this.classlist.add('over'); } function handledragleave(event) { this.classlist.remove('over'); } function handledrop(event) { event.stoppropagation(); event.preventdefault(); if(localstorage.getitem('currentdragelement') == event.target.dataset.uuid) { return; } currentdragelement = document.queryselector('[data-uuid="'+localstorage.getitem('currentdragelement')+'"]'); console.log('dragged element ', currentdragelement , ' on element ', event.target) localstorage.setitem('currentdragelement', null); return false; } function handledragend(event) { [].foreach.call(draggableelements, function (element) { element.classlist.remove('over'); }); } </script> </body> </html>
Comments
Post a Comment