下面是自己写的draggable.js(仅供参考)
draggable.js:
(function(){
jQuery.fn.extend({
draggable: function(){
var $this = $(this);
$this.css({position: "relative"});
$(this).on("mousedown", function(){
$(document).on("mousemove", function(e){
e.preventDefault();
var mouseX = e.pageX || e.offsetX ;
var mouseY = e.pageY || e.offsetY;
var $target = null;
var $temp = $this.parent();
while(!$temp.is("html")) {
var position = $temp.css("position");
if(position == "relative" || position == "absolute") {
$target = $temp;
break;
} else {
$temp = $temp.parent();
}
}
if(!$target) {
$target = $("body");
}
var top = mouseY - $target.offset().top - $this.height()/2,
left = mouseX - $target.offset().left - $this.width()/2;
$this.css("top", top);
$this.css("left", left);
});
$(document).on("mouseup", function(){
$(document).off("mousemove");
});
});
}
});
})(jQuery);
.draggable {
border: 1px dotted black;
}html:
<!docttype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="draggable.css">
</head>
<body>
<div class="resizable">sdfsdffffff</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="draggable.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>js:
(function(){
$(".draggable").draggable();
})(jQuery);
2922
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
