Swapping Array Values by Drag and Drop

JavaScript
1

Hello all,

I managed to put something together that swaps the content of div’s.
The content however is also linked to an array that I’d like to be updated as well.
It suffices if only the first value in the array is updated.

I’ve tried something that comes close to the solution but only works partly JSFiddle
For some reason it only works for the element that has been dragged first and will than not work the other way.
All help is welcome.

<div id="TEST">
<div id="A" class="M" draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)" ondragleave="draggingLeave(event)" ondrop="dropped(event)">A</div>
<div id="B" class="M" draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)"     ondragleave="draggingLeave(event)" ondrop="dropped(event)">B</div>
</div>
<div id="arroutput">output</div>

arr = [["A","BLABLA"],["B","MOREBLA"]]
var source;
function dragStarted(evt) {
    source = evt.target;
    evt.dataTransfer.setData("text/plain", evt.target.innerHTML);
    evt.dataTransfer.effectAllowed = "move";
    document.getElementById('uldPopup').style.display = "none";
}

function draggingOver(evt) {
    evt.preventDefault();
    evt.dataTransfer.dropEffect = "move";
    document.getElementById(evt.target.id).style.border = "1px solid orange";
}

function draggingLeave(evt) {
    evt.preventDefault();
    evt.dataTransfer.dropEffect = "move";
    document.getElementById(evt.target.id).style.border = "thin solid #bbb";
}

function dropped(evt) {
    evt.preventDefault();
    evt.stopPropagation();
    source.innerHTML = evt.target.innerHTML;
    evt.target.innerHTML = evt.dataTransfer.getData("text/plain");
    document.getElementById(evt.target.id).style.border = "thin solid #bbb";

    arr[returnIndex(arr, source.id)][0] = evt.target.id;
    arr[returnIndex(arr, evt.target.id)][0] = source.id;

    document.getElementById("arroutput").innerHTML = arr.join("<br />");
}

function returnIndex(array, value){
	for(i = 0; i < array.length; i++){
		if (array[i][0] == value){
			return i;
		}
	}
}
2

Is there anyone that can help me with this problem?

3

According to the error message in the console each time an entry is dragged, the last line in that code appears to be causing the problem because id=“uldPopup” does not exist in the HTML.

With that line commented out the array will update each time.

4

You are right, uldPopup does not exist in the example I provided.
I forgot to take it out after copying it.

However commenting it out did not solve the problem.
Something else seems to cause it.

5

In what way - when I commented out that line the array started switching the order back and forth as I swapped the two divs around with the rest of your code.

6

Please try to swap A with B in the JSFiddle example and than B with A.
You will see that it does not work properly.

7

I’m really stuck here.
isn’t there anyone that knows what the problem is?

8

You’re changing innerHTML of both divs when dragging is over, but forgot to change their IDs as well
This should work https://jsfiddle.net/v3ub84dc/1/

9

Hello megazoid, Thank you for replying.
It’s important that the ID’s of remain unchanged of all DIV’s (this because of other things that are going on in my program)
BTW your code sometimes fails to swap.

10

Can’t you use jQuery for that task?
It would be hundred times simplier and I can show you how to implement this without all that mess of events and handlers using jQuery UI

11

If there is no other way…
I need to go further. so please yes

12

here is it http://jsfiddle.net/yLfvz8ay/1/

13

Great job, It works great. Thanks megazoid!

14

Strange because when I tested your original code with that one line commented out it worked perfectly for me.

15

Did you try what I said? because it really is not working (the JSFiddle I provided in my first post with the suggested line commented out)

16

that did work for me so presumably it is a browser issue where different browsers give different results.

17

the same problem in Chrome and Firefox. IE fails to return the array output.

18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.