Hallo, ich übe und teste gerade mit den Möglichkeiten von Drag & Drop herum (https://wiki.selfhtml.org/wiki/JavaScript/Drag_%26_Drop). Das Ziel ist es, ein Element entweder in "example1" oder "example2" zu ziehen, inkl. den values aus den entsprechenden hidden fields.
Hat jemand ev. ein Tipp für mich, wie ich das angehen soll?
Bin dankbar für hilfreiche Tipps
Hat jemand ev. ein Tipp für mich, wie ich das angehen soll?
HTML-Code:
<div id="box1" class="boxes" draggable="true" ondragstart="drag(event)" style="width: 100px; height: 100px; border:1px solid black"> <input type="hidden" id="dragA" class="item" value="1"> <img src="https://wiki-test.selfhtml.org/images/6/63/Selfhtml-logo-Weihnachten-2006_patrick_rudolph.gif" alt="Logo-Entwurf von Patrick Rudolph"> </div> <div id="box2" class="boxes" draggable="true" ondragstart="drag(event)" style="width: 100px; height: 100px; border:1px solid black"> <input type="hidden" id="dragB" class="item" value="2"> <img src="https://wiki-test.selfhtml.org/images/d/d7/Selfhtml-logo-Weihnachten-2006-ani_kirsten-evers.gif" alt="Logo-Entwurf von Kirsten Evers"> </div> div class="ziel" ondrop="drop(event)" ondragover="allowDrop(event)" id="example1"></div> <div class="ziel" ondrop="drop(event)" ondragover="allowDrop(event)" id="example2"></div>
Code:
<script src="../js/jquery.min.js"></script> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData('text', ev.target.id); } function drop(ev) { ev.preventDefault(); var source = ev.dataTransfer.getData('text'); ev.target.appendChild(document.getElementById(source)); var goal = ev.target.id; $.ajax({ type:'post', url:'test-store.php', data:{ data_source:source, data_goal:goal }, success:function(response) { alert(response); } }); } </script>
Kommentar