我想拖动div并将其拖入另一个div然后再次开始拖动它。但是当我拖着它时，他失去了被拖的能力。我尝试了很多东西，但它仍然无效。 div被称为#myDIV 这是代码：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
/*styling here*/
#myDIV {
border: 1px solid black;
margin-bottom: 10px;
width: 500px;
height: 300px;
box-sizing: border-box;
border: solid #000 2px;
background-color: #d12;
}
.ZP {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
overflow: hidden;
background-color: #ccc;
}
.ZE {
position: fixed;
width: 500px;
height: 100px;
background-color: #ffff99;
overflow: hidden;
}
.ZE1 {
display: block;
top: 0;
left: calc(50% - 250px);
transform: rotate(180deg);
}
.ZE2 {
top: 0;
left: calc(85% - 250px);
transform: rotate(180deg);
}
.ZE3 {
top: calc(50% - 50px);
left: calc(100% - 300px);
transform: rotate(270deg);
}
.ZE4 {
top: calc(100% - 100px);
left: calc(85% - 250px);
transform: rotate(0deg);
}
.ZE5 {
top: calc(100% - 100px);
left: calc(50% - 250px);
transform: rotate(0deg);
}
.ZE6 {
top: calc(100% - 100px);
left: calc(15% - 250px);
transform: rotate(0deg);
}
.ZE7 {
top: calc(50% - 50px);
left: -200px;
transform: rotate(90deg);
}
.ZE8 {
top: 0;
left: calc(15% - 250px);
transform: rotate(180deg);
}
</style>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!--The above library(/socket.io/socket.io.js) will be generated by socket.io module of server -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="ZonePartage.js"></script>
<script src="ZoneCollaborative.js"></script>
<script src="Constante.js"></script>
<script src="ZoneEchange.js"></script>
<script src="Artifact.js"></script>
<script src="Serveur.js"></script>
<script src="User.js"></script>
</head>
<body id = view>
<script>
$(function() {
$( "#momo" ).draggable();
});
</script>
<div class="content" >
</div>
<script type="text/javascript">
var socket = io.connect('/'); //you can replace localhost with your public domain name too!!
socket.on("message",function(artefact){
/*
When server sends data to the client it will trigger "message" event on the client side , by
using socket.on("message") , one cna listen for the ,message event and associate a callback to
be executed . The Callback function gets the dat sent from the server
*/
console.log("Message from the server arrived")
artefact = JSON.parse(artefact);
console.log(artefact); /*converting the data into JS object */
$('#myDIV').append('<div > <h1>'+artefact.title+' </h1> <h2> '+artefact.message+'</h2> </div>'); /*appending the data on the page using Jquery */
});
socket.on("image",function(image){
/*
When server sends data to the client it will trigger "message" event on the client side , by
using socket.on("message") , one cna listen for the ,message event and associate a callback to
be executed . The Callback function gets the dat sent from the server
*/
console.log("Message from the server arrived")
image = JSON.parse(image);
console.log(message); /*converting the data into JS object */
$('#yas').append('<div >'+image.data+'</div>'); /*appending the data on the page using Jquery */
});
//functions
//function appelé qd le drag commence
function dragIt(theEvent) {
//dire au navigateur ce qu'il faut glisser
theEvent.dataTransfer.setData("Text", theEvent.target.id);
}
//fonction appelée lorsque l'élément drops
function dropIt(theEvent) {
//Obtenir une référence à l'élément dragged
var theData = theEvent.dataTransfer.getData("Text");
//Obtenir l'élément
var theDraggedElement = document.getElementById(theData);
//Ajouter à l' élément de drop
theEvent.target.appendChild(theDraggedElement);
//Charger le navigateur pour permettre le drop
theEvent.preventDefault();
}
</script>
<!--elements de la page-->
<script type="text/javascript">
var ele = document.getElementsByClassName ("#myDIV")[0];
//ele.onmousedown = eleMouseDown;
ele.addEventListener ("mousedown" , eleMouseDown , false);
function eleMouseDown () {
stateMouseDown = true;
document.addEventListener ("mousemove" , eleMouseMove , false);
}
function eleMouseMove (ev) {
var pX = ev.pageX;
var pY = ev.pageY;
ele.style.left = pX + "px";
ele.style.top = pY + "px";
document.addEventListener ("mouseup" , eleMouseUp , false);
}
function eleMouseUp () {
document.removeEventListener ("mousemove" , eleMouseMove , false);
document.removeEventListener ("mouseup" , eleMouseUp , false);
}
</script>
<div class="pics">
<div class="ZP" style="display:table-cell; text-align:center; vertical-align:middle " ondrop="dropIt(event);" ondragover="event.preventDefault();">
</div>
<div class="ZE ZE1" ondrop="dropIt(event);" ondragover="event.preventDefault();">
<img src="flower.jpg" width="80" height="80" draggable="true" ondragstart="dragIt(event);" id="ppic1" />
</div>
<span
style="left: 527.5px; top: 0px; width: 800px; height: 200px; transform: translate(0px, 0px) scale(1) rotate(180deg); opacity: 0;"
class="back"></span>
<div class="ZE ZE2" ondrop="dropIt(event);" ondragover="event.preventDefault();">
</div>
<span
style="left: 1176.75px; top: 0px; width: 800px; height: 200px; transform: translate(0px, 0px) scale(1) rotate(180deg); opacity: 0;"
class="back"></span>
<div class="ZE ZE3" ondrop="dropIt(event);" ondragover="event.preventDefault();">
</div>
<span
style="left: 1405px; top: 392.5px; width: 800px; height: 200px; transform: translate(0px, 0px) scale(1) rotate(270deg); opacity: 0;"
class="back"></span>
<div class="ZE ZE4" ondrop="dropIt(event);" ondragover="event.preventDefault();">
</div>
<span
style="left: 1176.75px; top: 785px; width: 800px; height: 200px; transform: translate(0px, 0px) scale(1) rotate(0deg); opacity: 0;"
class="back"></span>
<div class="ZE ZE5" id=momo style="text-align: center;" ondrop="dropIt(event);" ondragover="event.preventDefault();">
<div id="myDIV" draggable="true" ondragstart="dragIt(event);" id="pic1">
ARTEFACT
</div>
</div>
<span
style="left: 527.5px; top: 785px; width: 800px; height: 200px; transform: translate(0px, 0px) scale(1) rotate(0deg); opacity: 0;"
class="back"></span>
<div class="ZE ZE6" ondrop="dropIt(event);" ondragover="event.preventDefault();">
</div>
<span
style="left: -121.75px; top: 785px; width: 800px; height: 200px; transform: translate(0px, 0px) scale(1) rotate(0deg); opacity: 0;"
class="back"></span>
<div class="ZE ZE7" ondrop="dropIt(event);" ondragover="event.preventDefault();">
</div>
<span
style="left: -350px; top: 392.5px; width: 800px; height: 200px; transform: translate(0px, 0px) scale(1) rotate(90deg); opacity: 0;"
class="back"></span>
<div class="ZE ZE8" ondrop="dropIt(event);" ondragover="event.preventDefault();">
</div>
<span
style="left: -121.75px; top: 0px; width: 800px; height: 200px; transform: translate(0px, 0px) scale(1) rotate(180deg); opacity: 0;"
class="back"></span>
</div>
</body>
</html>