我正在尝试使用 Javascript 使对象可拖动。幸运的是，我设法构建了我想要的东西。每次运行代码时，我都可以拖动对象大约 8/11 次，然后我的浏览器开始卡住。我尝试使用 chrome、Firefox 和 safari，它们在选择对象并离开它大约 10 次后都卡住了。我去了 jquery 网站，我确保所有功能都以正确的方式使用。我找不到正在发生的事情的任何原因。有人可以帮忙吗？
<html>
<head>
<script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<style>
.draggable {
width:400px;
height:30px;
background-color:black;
position:absolute;
top:10px;
left:1px;
}
</style>
<script type='text/javascript'>
function moveobject() {
$(document).mousemove(function(event) {
$("#draggable1").css("top", event.pageY - plustop);
$("#draggable1").css("left", event.pageX - plusleft);
});
$("#draggable1").click(function() {
$(document).unbind();
$("#draggable1").click(moveobject);
});
}
$(document).ready(function() {
$("#draggable1").click(function() {
$("#draggable1").mousemove(function(e) {
var top = $("#draggable1").css("top");
var left = $("#draggable1").css("left");
top = top.replace("px", "");
left = left.replace("px", "");
plusleft = (e.pageX - left)
plustop = (e.pageY - top)
$(this).unbind("mousemove");
});
moveobject();
});
});
</script>
</head>
<body>
<div class='draggable' id='draggable1'></div>
</body>
</html>
最佳答案
$(function(){
var $el = $('#draggable1'),
$par = $(window), // $el move -> available area
atX,atY,wW,wH,
elW = $el.outerWidth(true),
elH = $el.outerHeight(true);
$el.on('mousedown', function(e) {
var off = $el.offset();
wW = $par.width();
wH = $par.height();
atX = e.pageX - off.left;
atY = e.pageY - off.top;
$(document).on('mousemove',moveHandler).on('mouseup',stopHandler);
});
function moveHandler(e) {
var X = e.pageX-atX;
var Y = e.pageY-atY;
X = Math.min( Math.max(0, X), wW-elW); // remove this lines if you don't
Y = Math.min( Math.max(0, Y), wH-elH); // need to restrict movement
$el.css({left: X, top: Y});
}
function stopHandler() {
$(document).off('mousemove',moveHandler).off('mouseup',stopHandler);
}
});
对于更多的元素来说不是很通用，所以你可以尝试并扩展一下这个
basic PLUGIN我创建的用途如下:
$(function(){
$('#draggable1').dragg({containment:window});
$('#draggable2').dragg(); // not contained
$('#test').dragg({containment:"#par"});
});
插件:
(function($) {
$.fn.extend({
dragg: function(opt) {
var S = {
containment: false
};
opt = $.extend(S, opt);
return this.each(function(){
var $el=$(this),atX,atY,atXP=0,atYP=0, wW=0,wH=0,
elW=$el.outerWidth(true),
elH=$el.outerHeight(true),
$cont = S.containment;
$el.on('mousedown', function(e) {
var off = $el.offset();
if($cont && $cont!==window){
var parOff = $($cont).offset();
atXP = parOff.left;
atYP = parOff.top;
}
wW = $($cont).width();
wH = $($cont).height();
atX = e.pageX - off.left;
atY = e.pageY - off.top;
$(document).on('mousemove',move).on('mouseup',stop);
});
function move(e) {
var X=e.pageX-atXP-atX, Y=e.pageY-atYP-atY;
if($cont){
X = Math.min( Math.max(0, X), wW-elW);
Y = Math.min( Math.max(0, Y), wH-elH);
}
$el.css({left: X, top: Y});
}
function stop() {
$(document).off('mousemove',move).off('mouseup',stop);
}
});
}
});
})(jQuery);
关于javascript - 如何制作自定义可拖动脚本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20414305/