堆栈内存溢出
  简体   繁体   English

在页面上拖动div

[英]Drag a div around a page

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

问题描述

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. 我正在尝试实现什么效果：我在页面周围有8个div，并且页面内还有另一个div，我想通过拖动将div'myDIV'拖动到页面中，然后将其拖放到' myDIV”添加到“ 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 个解决方案

解决方案1
 1  2016-04-21 09:10:47

You can use Jquery for this problem: 您可以使用Jquery来解决此问题： 

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

Check out the jQueryAPI for further information: 查看jQueryAPI以获得更多信息：

https://jqueryui.com/draggable/#constrain-movement colud be what you are looking for. https://jqueryui.com/draggable/#constrain-movement可以满足您的需求。 Or even the sortable: https://jqueryui.com/draggable/#sortable 甚至是可排序的： https : //jqueryui.com/draggable/#sortable

解决方案2
 1  2016-04-21 09:12:37

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

解决方案3
 0  2016-04-21 09:01:19

You have jQuery UI. 您有jQuery UI。 Let's use it: 让我们使用它： 

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何拖放一个 <div> 整个页面 - how to drag and drop a <div> across the page 使用javascript在页面上随机移动div - Moving div randomly around the page with javascript 使用JS在页面周围移动div - Using JS to move a div around the page 将 div 放置在页面上的任何位置，但仍有文字环绕 - position a div anywhere on the page but still have text wrap around it 在页面jQuery JS上随机移动多个div - Moving multiple div's randomly around a page jQuery JS 在按钮拖动上拖动父div - Drag parent div on button drag 在FireFox中拖动DIV并拖动调整大小 - Drag DIV and Drag Resize in FireFox 用重力效果拖动元素 - Drag elements around with gravity effect Pivot 摄像头 object 左右拖动 - Pivot camera around object on drag 如何在div内拖动div？ - How to drag a div within a div?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM