jquery或JS拖动DIV左右移动
4个回答
展开全部
<html>
<head>
<title>jquery或JS拖动DIV左右移动</title>
<script src="jquery-1.7.1.min.js"></script>
<style type="text/css">
body {background-color: #fff; }
.win {position: absolute; top: 0px; left: 0px;width: 300px;height: 222px;}
.title {height: 20px;width: 300px; position: absolute;background-color: #0094ff; float: inherit; top: 0px; left: 0px; }
.winCon { height: 200px;width: 298px; position: absolute; border: solid;
border-width: 1px; border-color: #0094ff; border-top: none; float: inherit; left: 0px; top: 20px; }
</style>
</head>
<body onload="showDiv(this,'test1');">
</body>
<script type="text/javascript">
function showDiv(element, str) {
$(document.body).append("<div class='win' id='win" + str + "'><div class='title' id='" + str + "'></div><div class='winCon'> 清新自在</div></div>");
$("#" + str).mousedown(function (event) {
var offset = $(this).offset();
_x = event.clientX - offset.left;
_y = event.clientY + 20 - offset.top;
$("#win" + str).css({ "top": offset.top - 20 + "px" });
$("#win" + str).mousemove(function (event) {
_xx = event.clientX - _x;
_yy = event.clientY - _y;
this.style.left = _xx + "px";
this.style.top = _yy + "px";
this.style.zIndex = "100";
return false;
});
return false;
});
$("#win" + str).mouseup(function () {
$(this).unbind("mousemove");
$(this).css({ "z-index": "-1" });
return false;
});
}
</script>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
(function($){
//拖拽插件,参数:id或object
$.Move = function(_this){
if(typeof(_this)=='object'){
_this=_this;
}else{
_this=$("#"+_this);
}
if(!_this){return false;}
_this.css({'position':'absolute'}).hover(function(){$(this).css("cursor","move");},function(){$(this).css("cursor","default");})
_this.mousedown(function(e){//e鼠标事件
var offset = $(this).offset();
var x = e.pageX - offset.left;
var y = e.pageY - offset.top;
_this.css({'opacity':'0.3'});
$(document).bind("mousemove",function(ev){//绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件
_this.bind('selectstart',function(){return false;});
var _x = ev.pageX - x;//获得X轴方向移动的值
var _y = ev.pageY - y;//获得Y轴方向移动的值
_this.css({'left':_x+"px",'top':_y+"px"});
});
});
$(document).mouseup(function(){
$(this).unbind("mousemove");
_this.css({'opacity':''});
})
};
})(jQuery)
$.Move($('#moveId'));
<div id="moveId">adsfasdfadf</div>任意拖动
本回答被提问者采纳
已赞过
已踩过<
你对这个回答的评价是？
展开全部
只需要<div id="moveId">adsfasdfadf</div> 放到页面的JS前面加载就可以拖拽了，
或者加载【$.Move($('#moveId'));】这个方法，放到节点加载完后加载。就可以解决了，方法如下。
$(document).ready(function(){
$.Move($('#moveId'));
})
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
以后问问题的时候,你说清楚别人也好回答你,问问题都不负责的态度,回答问题的人自然不乐意搭理.
jquery-ui有一个draggable插件,你自己去jquery网站搜索下吧.
jquery-ui有一个draggable插件,你自己去jquery网站搜索下吧.
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
