Drag n Drop с использованием JavaScript

Я начал изучать JavaScript. Я попробовал следующее перетащить изображение в dropzone под названием «dropTarget1»; изображение не перетаскивается. Не могли бы вы взглянуть на мой код и сообщить, что я делаю неправильно.

var draggable=document.getElementById('dragMe1');

draggable.addEventListener('dragstart',dragStart,false);


var droptarget=document.getElementById("dropTarget1");
	droptarget.addEventListener('dragenter',dragEnter,false);
    droptarget.addEventListener('dragover',dragOver,false);
    droptarget.addEventListener('dragleave',dragLeave,false);
    droptarget.addEventListener('drop',drop,false);


function dragStart(event){
	event.dataTransfer.setData('text/html', event.currentTarget.id);
}


    function dragOver(event) {
        event.preventDefault();
        return false;
    }

  
    function drop(event) {
		var dragMe1=document.createElement("img");
        var data = event.dataTransfer.getData('text/html');
        event.preventDefault();
		event.stopPropagation();
		dragMe1.src=data;
		droptarget.appendChild('dragMe1');
        return false;
    }
#dropTarget1{
	width:300px;
	height:300px;
	background-color:#DBF272;
	
}

#dragMe1{
	width:300px;
}

#dragMe1 img{
	padding-left:45px;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="myStyle.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="dropTarget1"></div>



<img id="dragMe1" src="logo1.png" draggable="true" >
<script src="myDragnDrop.js"> </script>
</body>
</html>

javascript,html5,

0

Ответов: 2


0

Если вы хотите использовать jQuery, то этот пользовательский интерфейс Draggable | jquery может быть действительно простым вариантом.


0

Ваш код JavaScript должен быть таким (пояснение в комментариях);

var draggable=document.getElementById('dragMe1');
var droptarget=document.getElementById("dropTarget1");
var newIm = document.createElement("img"); //Create new image element
/*Subscribe to dragover event. 
  This event fires when a user drag the image over the target */
droptarget.addEventListener('dragover',dragOver,false);
/*Subscribe to drop event. 
  This event fires when a user drop the image on the target */ 
droptarget.addEventListener('drop',drop,false); 

function dragOver(event) {
  event.stopPropagation(); //Prevent further drop events from bubbling up the DOM tree
  event.preventDefault(); //Prevent the default behavior of the browser when dropping something on it
  event.dataTransfer.dropEffect = "move"; //Specify the feedback that the user receives when a user drags over the target. It can be copy, link, or none
  return false;
}

function drop(event) {
  var data = event.dataTransfer.getData('text/plain'); //To retrieve the image URL
  event.preventDefault();
  event.stopPropagation();
  newIm.src=data; //Write the image URL into the src attribute of newIm
  droptarget.appendChild(newIm); //Add the new created image to the target element
  document.body.removeChild(draggable); //Remove the original image as you're dragging and dropping (moving)
  return false;
}

Вам не нужно подписываться на некоторые события, такие как dragenter, вам просто нужно подписаться на события dragover and drop.

JavaScript, html5,
Похожие вопросы