Mr.SuicideSheep Mr.SuicideSheep - 1 month ago 5
HTML Question

A simple draggable DIV using jQuery-UI

I would like to make the div

innerDropzone
draggable for below code:



div.example {
width: 560px;
height: 750px;
display: block;
padding: 10px 20px;
color: black;
background: rgba(255, 255, 255, 0.4);
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
margin-bottom: 10px;
border: 1px solid rgba(0, 0, 0, 0.2);
position: relative;
float: left;
margin-right: 40px;
}
#dropzone {
height: 530px;
width: 530px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 2px dashed #0687FF;
display: block;
background-image: url(/Images/RE/02.png);
}
#imgzone {
height: 150px;
width: 150px;
overflow: auto;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 2px groove #0687FF;
float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

<div class="example">
<div id="dropzone" style="text-align: center; float: left">
<div id="innerDropzone" style="position: absolute; top: 20px; left: 30px; width: 250px; height: 250px">
<img style="display: none;" id="img" src="nothing" />
</div>
<div id="hint" style="position: absolute; top: 22%; left: 30%;">Drop in images from your desktop</div>
</div>
<div id="imgzone">
<div id="imagelist">
<img id="sampleImg" src="/Images/RE/02.png" width="100px" height="100px" style="margin: 10px;" />
</div>
</div>
</div>





I tried to make the DIV draggable as below however it failed:

$('#innerDropzone').draggable();

Answer

For Jquery-ui version 1.8.23 is not compatible with jquery 1.9.1. (as per what i experience)

However as i found on this Wiki link Jquery-ui 1.8.23 is compatible with Jquery 1.3.2+.

I test your html with latest libraries, everything is working fine..here is fiddle

So it is Jquery UI and Jquery library compatibility issue. Use latest or compatible libraries.

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>