使用 jQuery-UI 的简单可拖动 DIV
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19113498/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
A simple draggable DIV using jQuery-UI
提问by SuicideSheep
I would like to make the div innerDropzonedraggable for below code:
我想让innerDropzone以下代码的 div可拖动：
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:
我试图使 DIV 可拖动如下，但它失败了：
$('#innerDropzone').draggable();
采纳答案by sangram parmar
For Jquery-ui version 1.8.23 is not compatible with jquery 1.9.1. (as per what i experience)
对于 Jquery-ui 版本 1.8.23 与 jquery 1.9.1 不兼容。（根据我的经验）
However as i found on this Wiki linkJquery-ui 1.8.23 is compatible with Jquery 1.3.2+.
但是，正如我在此Wiki 链接上发现的，Jquery-ui 1.8.23 与 Jquery 1.3.2+ 兼容。
I test your html with latest libraries, everything is working fine..here is fiddle
我用最新的库测试你的 html，一切正常..这里是小提琴
So it is Jquery UI and Jquery library compatibility issue. Use latest or compatible libraries.
所以这是 Jquery UI 和 Jquery 库兼容性问题。使用最新的或兼容的库。
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
回答by itacode
If you need only to make a div draggable, please try following my script in jQuery, working also on touch devices.
如果您只需要使 div 可拖动，请尝试在 jQuery 中遵循我的脚本，也可以在触摸设备上工作。
;(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
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;
}
回答by Rashid
I thing nothing big wrong in your code. Seeming that your are using JQuery $('#innerDropzone').draggable();in head tag.
Just wrap it in function like this:
我认为你的代码没有什么大问题。似乎您$('#innerDropzone').draggable();在 head 标记中使用 JQuery 。
只需将它包装在这样的函数中：
$(function () {
$('#innerDropzone').draggable();
});
回答by Adam 'Sacki' Sackfield
see this site http://jqueryui.com/draggable/it has a guide to do what you are trying to do. Also ensure in your example you are referencing the jQuery library
看到这个网站http://jqueryui.com/draggable/它有一个指南来做你想做的事情。还要确保在您的示例中您正在引用 jQuery 库
回答by Rameez
回答by cmsonnet
Have a look example on this website, it show pretty simple code to use jquery drag and drop. http://www.overpie.com/jquery/articles/jquery-drag-and-drop-example
看看这个网站上的例子，它显示了使用 jquery 拖放的非常简单的代码。 http://www.overpie.com/jquery/articles/jquery-drag-and-drop-example
