Problems with Drag and Drop in pure JavaScript

Question

Problems with Drag and Drop in pure JavaScript

Navigation

#1 by (2 votes)

1

I'm having problems with my Drag and Drop function in JavaScript, the operation of drag and drop is perfect, but when I change some images, they do the wrong exchange. For example: I have the images x, y and z, and when I change z and y, the exchange occurs in y and x and z is in the same place.

//esta função irá pegar o ID das imagens, para fazer a troca das imagens de acordo com o id delas

function pegaId(obj) {
var idCorreto = obj.getAttribute('id');
return idCorreto;
}

function drag(obj) {
	var zIndexImg = 0;
	// com a var id, eu detecto qual imagem está sendo arrastada
	var id = obj.getAttribute('id');

	var img = document.getElementById(id);
	var imgPositionLeft = img.offsetLeft;
	var imgPositionTop = img.offsetTop;

	img.ondragstart = function() {
		return false;
	};

	function dropImage(e) {
		img.style.transition = "";
		img.style.zIndex = zIndexImg++;

		// faço o drag das imagens
		img.style.top = e.clientY - imgPositionTop + 'px';
		img.style.left = e.clientX - imgPositionLeft + 'px';

		console.log(e.clientX - imgPositionLeft);
	}

	function change(id1, id2, div1, div2) {
		// esta função realizara a troca das imagens
		img.removeAttribute('style');

		// atribuo as imagens e as divs em que estao guardadas em variaveis
		var imgDiv = document.getElementById(div1);
		var imgDiv_2 = document.getElementById(div2);
		var imgId = document.getElementById(id1);
		var imgId2 = document.getElementById(id2);

		// pego o id de ambas imagens
		var getId = imgId.getAttribute('id');
		var getId2 = imgId2.getAttribute('id');

		// faço a troca dos ids
		imgId.setAttribute('id', getId2);
		imgId2.setAttribute('id', getId);

		// e sobreponho as imagens nas divs, fazendo a troca
		imgDiv.innerHTML = imgId2.cloneNode().outerHTML;
		imgDiv_2.innerHTML = imgId.cloneNode().outerHTML;
	}

	function drop(e) {
		// esta função é para quando soltar as imagens
		dropImage(e);
		// removo os eventos adicionados
		document.removeEventListener('mousemove', dropImage);
		document.removeEventListener('mouseup', drop);

		// descubro qual a imagem clicada para fazer a troca
		if (img.style.left >= '90px' && img.style.left <= '130px') {
			// pego o ID para saber qual a imagem
			if (pegaId(obj) == 'teste1') {

				// e faço a troca com a função change
				change("teste1", "teste2", "img1", "img2");

			} else if (pegaId(obj) == 'teste2') {
				change("teste2", "teste3", "img2", "img3");
			}

		}

		if (img.style.left >= '230px' && img.style.left <= '250px') {
			change("teste1", "teste3", "img1", "img3");

		}
		if (img.style.left >= '-115px' && img.style.left <= '-130px') {

			if (pegaId(obj) == 'teste3') {
				change("teste2", "teste3", "img2", "img3");
			} else if (pegaId(obj) == 'teste2') {
				change("teste2", "teste1", "img2", "img1");
			}
		}

		if (img.style.left >= '-225px' && img.style.left <= '-250px') {
			change("teste1", "teste3", "img1", "img3");
		}

		// reseto os valores após soltar a imagem
		img.style.left = '0px';
		img.style.top = '0px';
	}

	// adiciono os eventos novamente após clicar nas imagens
	img.addEventListener('mousedown', function() {
		document.addEventListener('mousemove', dropImage);
		document.addEventListener('mouseup', drop);
	});
}

link

javascript drag-n-drop

asked by anonymous 30.05.2015 / 20:35

1 answer

Assign CSS value to HTML via JavaScript Disable a button in ASP.NET MVC

score 2 · Accepted Answer

I identified that my problem occurred because the same function that exchanged the images was exchanging the ids, causing in this confusion in some exchanges. I did the exchange of the ID in another function and the problem ceased to exist, like this:

//função que troca as imagens de lugar
            function change(id1,id2,div1,div2){

                img.removeAttribute('style');

                var imgDiv = document.getElementById(div1);
                var imgDiv_2 = document.getElementById(div2);
                var imgId = document.getElementById(id1);
                var imgId2 = document.getElementById(id2);

                imgDiv.innerHTML = imgId2.cloneNode().outerHTML;
                imgDiv_2.innerHTML = imgId.cloneNode().outerHTML;
}

//função que troca o id das imagens
            function trocaId(id1,id2){
                var id_1 = document.getElementById(id1);
                var id_2 = document.getElementById(id2);

                    id_1.setAttribute('id',id2);
                    id_2.setAttribute('id',id1);
                }

//fazendo a troca

            if(img.style.left >= '250px' && img.style.left <= '290px'){
                if(pegaId(obj) == 'teste1'){
                    change("teste1","teste2","img1","img2");
                    trocaId("teste1","teste2");
                }else if(pegaId(obj) == 'teste2'){
                    change("teste2","teste3","img2","img3");
                    trocaId("teste2","teste3");
                }

link