Jump to content

stess29

Members
  • Posts

    1
  • Joined

  • Last visited

Previous Fields

  • Languages
    HTML, PHP, JavaScript, CSS, SQL, .Net

Profile Information

  • Gender
    Male
  • Location
    France

stess29's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Hello everyone, I know a little Javascript and I have a problem with a function of drag and drop. Let me explain it. I have a page where I have a sytem of drag and drop with images. Each image are in div and I have to put them in an other div. After putting all my images on a div, I have a button (like a form) and when I click on this button, I want to collect information. For example, I want to know in each div my first image is. I want the same for the second image and the other ones. Here is my javascript code : <script> function allowDrop(ev){ ev.preventDefault(); } function drag(ev){ ev.dataTransfer.effectAllowed='move'; ev.dataTransfer.setData("Text", ev.target.id); } function drop(ev){ ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); previousParent = document.getElementById(data).parentNode; if (ev.target.nodeName=="IMG") { // here nb parentNode.childNodes !=0 ! for (i=0; i<ev.target.parentNode.childNodes.length; i++) { var node = ev.target.parentNode.childNodes[i]; if (node.nodeName=="IMG") { ev.target.parentNode.insertBefore(document.getElementById(data), node); ev.target.parentNode.removeChild(node); if (!RegExp("fake").test(node.id)) { previousParent.appendChild(node); } break; } } } else { // check if div is not empty for (i=0; i<ev.target.childNodes.length; i++) { var node = ev.target.childNodes[i]; if (node.nodeName=="IMG") { ev.target.insertBefore(document.getElementById(data), node); ev.target.removeChild(node); alert (node.id+":"+RegExp("fake").test(node.id)); if (!RegExp("fake").test(node.id)) { previousParent.appendChild(node); } break; } } // div is empty, add drag ev.target.appendChild(document.getElementById(data)); } } </script> The divs where my image are at first : <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="img/d&d/model1_image1.gif" draggable="true" ondragstart="drag(event)" id="drag1"></div><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="img/d&d/model1_image2.gif" draggable="true" ondragstart="drag(event)" id="drag2"></div><div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="img/d&d/model1_image3.gif" draggable="true" ondragstart="drag(event)" id="drag3"></div><div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="img/d&d/model1_image4.gif" draggable="true" ondragstart="drag(event)" id="drag4"></div> And the divs where my images are after the drag and drop : <div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"></div><div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)"></div><div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)"></div><div id="div8" ondrop="drop(event)" ondragover="allowDrop(event)"></div> Is there a solution to my problem ? Thank you in advance for your answers.
×
×
  • Create New...