Question

这里有一个新手，但有人可以查看这段代码，让我知道我哪里出错了吗？我试图实现什么效果：我在页面周围有8个div，我在页面内有另一个div，我想通过拖动它来移动这个div'myDIV'到页面，然后我想拖放这个' myDIV'进入'ZE'div。

这就是我做的事情

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="../jquery.easyui.min.js"></script>
<style type="text/css">
/*styling here*/

.myDIV {
    margin: 20px auto;
    display: inline-block;
    width: 400px;
    height: 370px;   
    line-height: 20px;
    padding-top: 38px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #F0F0F0;
    box-sizing: border-box;
    text-align: center;
    resize: both;
    overflow: auto;
    position: relative;

        /* gradients - second red border, first red border, top white space, blue lines */
    background-image:  -webkit-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -webkit-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -webkit-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -webkit-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
    background-image:  -moz-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -moz-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -moz-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -moz-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
    background-image:  -ms-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -ms-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -ms-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -ms-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
    background-image:  -o-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -o-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -o-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -o-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
    background-image:  linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
    background-size: 1px, 1px, auto, auto 20px;
    background-repeat: repeat-y, repeat-y, no-repeat, repeat;
    background-position: 90% 0px, 10% 0px, 0px 0px, 0px 0px;

    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.myDIV:first-line {
    line-height: 33px;
    vertical-align: baseline;
}

.myDIV:focus {
    outline: none;
}
.avatar {
width : 40px;
height : 40px;
display: block;

}

.ZP {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    overflow: hidden;
        background-color: #ccc;
 display: flex;              /* establish flex container */
    flex-direction: column;     /* stack flex items vertically */
    justify-content: center;    /* center items vertically, in this case */
    align-items: center;        /* center items horizontally, in this case */
 /*display: table-cell;

  vertical-align: middle;
  text-align: center;*/
}

.ZE { 
height: 100px;
width: 500px; 

background-color: green; 
position: fixed;
overflow: hidden;

/* outer shadows  (note the rgba is red, green, blue, alpha) */
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4); 
-moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);

/* rounded corners */
-webkit-border-radius: 12px;
-moz-border-radius: 7px; 
border-radius: 7px;

/* gradients */
background: -webkit-gradient(linear, left top, left bottom, 
color-stop(0%, green), color-stop(15%, green), color-stop(100%, #D7E9F5)); 
background: -moz-linear-gradient(top, green 0%, green 0%, #D5E4F3 130%); 
}


.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>
/* Events fired on the drag target */

document.addEventListener("dragstart", function(event) {
    // The dataTransfer.setData() method sets the data type and the value of the dragged data
    event.dataTransfer.setData("Text", event.target.id);

    // Output some text when starting to drag the p element
    //document.getElementById("demo").innerHTML = "Started to drag the p element.";

    // Change the opacity of the draggable element
    event.target.style.opacity = "0.4";
});

// While dragging the p element, change the color of the output text
document.addEventListener("drag", function(event) {
  //  document.getElementById("demo").style.color = "red";
});

// Output some text when finished dragging the p element and reset the opacity
document.addEventListener("dragend", function(event) {
    //document.getElementById("demo").innerHTML = "Finished dragging the p element.";
    event.target.style.opacity = "1";
});


/* Events fired on the drop target */

// When the draggable p element enters the droptarget, change the DIVS's border style
document.addEventListener("dragenter", function(event) {
    if ( event.target.className == "ZE ZE1" ) {
        event.target.style.border = "3px dotted red";
    }
    if ( event.target.className == "ZE ZE2" ) {
        event.target.style.border = "3px dotted red";
    }
    if ( event.target.className == "ZE ZE3" ) {
        event.target.style.border = "3px dotted red";
    }
    if ( event.target.className == "ZE ZE4" ) {
        event.target.style.border = "3px dotted red";
    }
    if ( event.target.className == "ZE ZE5" ) {
        event.target.style.border = "3px dotted red";
    }
    if ( event.target.className == "ZE ZE6" ) {
        event.target.style.border = "3px dotted red";
    }
    if ( event.target.className == "ZE ZE7" ) {
        event.target.style.border = "3px dotted red";
    }
    if ( event.target.className == "ZE ZE8" ) {
        event.target.style.border = "3px dotted red";
    }
});

// By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element
document.addEventListener("dragover", function(event) {
    event.preventDefault();
});

// When the draggable p element leaves the droptarget, reset the DIVS's border style
document.addEventListener("dragleave", function(event) {
    if ( event.target.className == "ZE ZE1" ) {
        event.target.style.border = "";
    }
     if ( event.target.className == "ZE ZE2" ) {
        event.target.style.border = "";
    }
     if ( event.target.className == "ZE ZE3" ) {
        event.target.style.border = "";
    }
     if ( event.target.className == "ZE ZE4" ) {
        event.target.style.border = "";
    }
     if ( event.target.className == "ZE ZE5" ) {
        event.target.style.border = "";
    }
     if ( event.target.className == "ZE ZE6" ) {
        event.target.style.border = "";
    }
     if ( event.target.className == "ZE ZE7" ) {
        event.target.style.border = "";
    }
     if ( event.target.className == "ZE ZE8"
      ) {
        event.target.style.border = "";
    }
});

/* On drop - Prevent the browser default handling of the data (default is open as link on drop)
   Reset the color of the output text and DIV's border color
   Get the dragged data with the dataTransfer.getData() method
   The dragged data is the id of the dragged element ("drag1")
   Append the dragged element into the drop element
*/
document.addEventListener("drop", function(event) {
    event.preventDefault();
    if ( event.target.className == "ZP" ) {
        document.getElementById("demo").style.color = "";
        event.target.style.border = "";
        var data = event.dataTransfer.getData("Text");
        event.target.appendChild(document.getElementById(data));
    }
    if ( event.target.className == "ZE ZE1" ) {
        document.getElementById("demo").style.color = "";
        event.target.style.border = "3px dotted red";
        var data = event.dataTransfer.getData("Text");
        event.target.appendChild(document.getElementById(data));
    }
    if ( event.target.className == "ZE ZE2" ) {
        document.getElementById("demo").style.color = "";
        event.target.style.border = "3px dotted red";
        var data = event.dataTransfer.getData("Text");
        event.target.appendChild(document.getElementById(data));
    }
    if ( event.target.className == "ZE ZE3" ) {
        document.getElementById("demo").style.color = "";
        event.target.style.border = "3px dotted red";
        var data = event.dataTransfer.getData("Text");
        event.target.appendChild(document.getElementById(data));
    }
    if ( event.target.className == "ZE ZE4" ) {
        document.getElementById("demo").style.color = "";
        event.target.style.border = "3px dotted red";
        var data = event.dataTransfer.getData("Text");
        event.target.appendChild(document.getElementById(data));
    }
    if ( event.target.className == "ZE ZE5" ) {
        document.getElementById("demo").style.color = "";
        event.target.style.border = "3px dotted red";
        var data = event.dataTransfer.getData("Text");
        event.target.appendChild(document.getElementById(data));
    }
    if ( event.target.className == "ZE ZE6" ) {
        document.getElementById("demo").style.color = "";
        event.target.style.border = "3px dotted red";
        var data = event.dataTransfer.getData("Text");
        event.target.appendChild(document.getElementById(data));
    }
    if ( event.target.className == "ZE ZE7" ) {
        document.getElementById("demo").style.color = "";
        event.target.style.border = "3px dotted red";
        var data = event.dataTransfer.getData("Text");
        event.target.appendChild(document.getElementById(data));
    }
    if ( event.target.className == "ZE ZE8" ) {
        document.getElementById("demo").style.color = "";
        event.target.style.border = "3px dotted red";
        var data = event.dataTransfer.getData("Text");
        event.target.appendChild(document.getElementById(data));
    }
});
</script>

<div class="out">

<div class="ZP"   style="text-align: center;"  id="demo">





</div>
<div class="ZE ZE1"   id="ze1" >

<img class="avatar"; src="avatar1.png"  />
<div class="myDIV myDIV1" class="ui-widget-content draggable" draggable="true" id="myDIV1" style="display: inline-block">

ARTEFACT1
</div>
</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"  id="ze2" >
<img class="avatar"; src="avatar2.png" />

<div class="myDIV myDIV2" class="ui-widget-content draggable" draggable="true"  id="myDIV2">

ARTEFACT2
</div>

</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"  id="ze3" >
<img class="avatar"; src="avatar3.png" />

<div class="myDIV myDIV3" class="ui-widget-content draggable" draggable="true"  id="myDIV3">

ARTEFACT3
</div>

</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"   id="ze4" >
<img class="avatar"; src="avatar4.png"  />

<div class="myDIV myDIV4" class="ui-widget-content draggable" draggable="true"  id="myDIV4">

ARTEFACT4
</div>



</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="ze5" >
<img class="avatar"; src="avatar5.png"  />

<div class="myDIV myDIV5" class="ui-widget-content draggable" draggable="true"  id="myDIV5">

ARTEFACT5
</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" id="ze6" >
<img class="avatar"; src="avatar6.png"  />

<div class="myDIV myDIV6" class="ui-widget-content draggable" draggable="true"  id="myDIV6">

ARTEFACT6
</div>

</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" id="ze7" >


<img class="avatar"; src="avatar7.png"  />
<div class="myDIV myDIV7" class="ui-widget-content draggable" draggable="true"  id="myDIV7">

ARTEFACT7
</div>
</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" id="ze8" >
<img class="avatar"; src="avatar8.png" />
<div class="myDIV myDIV8" class="ui-widget-content draggable" draggable="true"  id="myDIV8">

ARTEFACT8
</div>

</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>

Answer 1

您可以使用Jquery解决此问题：

$(function() {
   $( "#myDIV" ).draggable();
});

查看jQueryAPI以获取更多信息：

https://jqueryui.com/draggable/#constrain-movement colud是您正在寻找的。甚至是可排序的：https://jqueryui.com/draggable/#sortable

Answer 2

您可以使用此链接 http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop 希望这会有所帮助。

Answer 3

你有jQuery UI。让我们使用它：

(document).ready(function(){
    $('myDIV').draggable();
});

在页面上拖动div

3 个答案: