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();
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>
If you need only to make a div draggable, please try following my script in jQuery, working also on touch devices.
;(function ($, window, document, undefined) {
var $canvas = $('#canvas'),
canvT = $canvas.offset().top,
canvL = $canvas.offset().left,
$elem = $('<div/>', {
'class': 'ball'
}),
offL = 0,
offT = 0,
dragging = 0,
touchDev = 0;
var onDrop = function onDrop(e) {
$(document).off('mousemove.dp');
$(document).off('mouseup.dp');
dragging = 0;
};
var onDrag = function onDrag(e) {
$elem.css({
'left': e.pageX - canvL + offL,
'top': e.pageY - canvT + offT
});
};
$elem.appendTo($canvas);
if ('touchstart' in window) {
touchDev = 1;
}
//touchDev = 1;
if (touchDev === 0) {
console.log('mousedown');
$elem.on('mousedown', function (e) {
if (dragging === 0) {
offL = $(this).offset().left - e.pageX;
offT = $(this).offset().top - e.pageY;
}
dragging = 1;
$(document).on('mousemove.dp', onDrag);
$(document).on('mouseup.dp', onDrop);
});
} else {
$elem.on('touchstart', function(event) {
var e = event.originalEvent;
var touch = e.targetTouches[0];
offL = $(this).offset().left - touch.pageX;
offT = $(this).offset().top - touch.pageY;
});
$elem.on('touchmove', function(event) {
var e = event.originalEvent,
touch;
if (e.targetTouches.length == 1) {
touch = e.targetTouches[0];
onDrag(touch);
}
});
}
})(jQuery, window, document);
CSS
* {
margin: 0;
padding: 0;
}
#canvas {
position: relative;
top: 20px;
left: 20px;
width: 300px;
height: 300px;
border: 1px solid;
}
.ball {
position: absolute;
width: 80px;
height: 80px;
background-color: green;
border-radius: 9999px;
}
JS Bin http://output.jsbin.com/joweca/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With