stackoom
  简体   繁体   中英

Drag a div around a page

 原文  2016-04-21 08:40:52  6   3    javascript/ jquery/ html/ css

Question

A total newbie here but could someone please review this code and let me know where I am going wrong? What effect I am trying to achieve: i have 8 divs around the page, and i have another div inside the page, i want to move this div 'myDIV' aroud the page by dragging it , then i want to drag and drop this 'myDIV' into the 'ZE' div.

here is what i did 

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

3 answers

solution1
 1  2016-04-21 09:10:47

You can use Jquery for this problem: 

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

Check out the jQueryAPI for further information:

https://jqueryui.com/draggable/#constrain-movement colud be what you are looking for. Or even the sortable: https://jqueryui.com/draggable/#sortable

solution2
 1  2016-04-21 09:12:37

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

solution3
 0  2016-04-21 09:01:19

You have jQuery UI. Let's use it: 

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question how to drag and drop a <div> across the page Moving div randomly around the page with javascript Using JS to move a div around the page position a div anywhere on the page but still have text wrap around it Moving multiple div's randomly around a page jQuery JS Drag parent div on button drag Drag DIV and Drag Resize in FireFox Drag elements around with gravity effect Pivot camera around object on drag How to drag a div within a div?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM