jquery 在页面周围拖动div

bejyjqdl  于 2023-10-17  发布在  jQuery
关注(0)|答案(4)|浏览(125)

一个总新手在这里，但有人可以请审查这段代码，让我知道我在哪里出错？我想达到的效果：我有8个div在页面周围，我有另一个div在页面内，我想通过拖动它来移动这个div 'myDIV' aroud页面，然后我想将这个'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>
jquery

4条答案

按热度按时间
ztmd8pv5

ztmd8pv51#

你可以使用Jquery来解决这个问题：

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

查看jQueryAPI以获取更多信息：
https://jqueryui.com/draggable/#constrain-movement colud是你正在寻找的.甚至是sortable：https://jqueryui.com/draggable/#sortable

赞(0）分享  回复(0）举报  2023-10-17
qvsjd97n

qvsjd97n2#

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

赞(0）分享  回复(0）举报  2023-10-17
xtfmy6hx

xtfmy6hx3#

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

(document).ready(function(){
    $('myDIV').draggable();
});
赞(0）分享  回复(0）举报  2023-10-17
hs1rzwqc

hs1rzwqc4#

你的问题是你没有包含jQuery UI。

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

那么它应该看起来像这样：

$( function() {
$( "#myDiv" ).draggable();

}）中;

赞(0）分享  回复(0）举报  2023-10-17
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com