CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Moez Ben Ahmed
Moez Ben Ahmed

Reputation: 93

Drag a div around a page

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>

Upvotes: 0

Views: 1675

Answers (4)

user22652139
user22652139

Reputation:

Your problem is that you are not including 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>

Then it should look like this:

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

} );

Upvotes: 0

Steven Sugiarto Wijaya
Steven Sugiarto Wijaya

Reputation: 171

You have jQuery UI. Let's use it:

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

Upvotes: 0

misss-popcorn
misss-popcorn

Reputation: 600

You can use this link http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop hope this will help .

Upvotes: 1

G43beli
G43beli

Reputation: 3952

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

Upvotes: 1

Related Questions