jquery或JS拖动DIV左右移动_百度知道
jquery或JS拖动DIV左右移动
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
采纳数：370
获赞数：1506
&html&&head&&title&jquery或JS拖动DIV左右移动&/title&&script&src=&jquery-1.7.1.min.js&&&/script&&style&type=&text/css&&&&&&body&{background-color:&#&}&&&&.win&{position:&&top:&0&left:&0width:&300height:&222}&&&&.title&{height:&20width:&300&&position:&background-color:&#0094&float:&&top:&0&left:&0&}&&&&.winCon&{&height:&200width:&298&position:&&border:&&&&&&&&&&&&&&&&border-width:&1&border-color:&#0094&border-top:&&&float:&&left:&0&top:&20&}&/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.&&&&&&&&&&&&_y&=&event.clientY&+&20&-&offset.&&&&&&&&&&&&$(&#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&&&&&&&&&&&&&});&&&&&&&&&&&&return&&&&&&&&&});&&&&&&&&$(&#win&&+&str).mouseup(function&()&{&&&&&&&&&&&&$(this).unbind(&mousemove&);&&&&&&&&&&&&$(this).css({&&z-index&:&&-1&&});&&&&&&&&&&&&return&&&&&&&&&});&&&&}&/script&&/html&
采纳数：349
获赞数：1285
(function($){&&&&//拖拽插件,参数:id或object&&&&$.Move&=&function(_this){&&&&&&&&if(typeof(_this)=='object'){&&&&&&&&&&&&_this=_&&&&&&&&}else{&&&&&&&&&&&&_this=$(&#&+_this);&&&&&&&&}&&&&&&&&if(!_this){return&}&&&&&&&&_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.&&&&&&&&&&&&var&y&=&e.pageY&-&offset.&&&&&&&&&&&&_this.css({'opacity':'0.3'});&&&&&&&&&&&&$(document).bind(&mousemove&,function(ev){//绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件&&&&&&&&&&&&&&&&_this.bind('selectstart',function(){return&});&&&&&&&&&&&&&&&&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&任意拖动
本回答被提问者采纳
loveWatcher
loveWatcher
采纳数：141
获赞数：310
以后问问题的时候,你说清楚别人也好回答你,问问题都不负责的态度,回答问题的人自然不乐意搭理.jquery-ui有一个draggable插件,你自己去jquery网站搜索下吧.
jaywcjlove
jaywcjlove
采纳数：22
获赞数：47
只需要&div&id=&moveId&&adsfasdfadf&/div& 放到页面的JS前面加载就可以拖拽了，或者加载【$.Move($('#moveId'));】这个方法，放到节点加载完后加载。就可以解决了，方法如下。$(document).ready(function(){&&&&$.Move($('#moveId'));})
其他1条回答
为你推荐：
其他类似问题
您可能关注的内容
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。jQuery拖动图片删除示例
转载 &更新时间：日 17:17:57 & 作者：
存储的是被拖动的图片的初始坐标，为两个变量设置被拖动图片的初始坐标，具体实现如下，感兴趣的朋友可以参考下哈
代码如下: &head& &title&&/title& &style type="text/css"& #mydiv { width: 900 background-color: #444; position: left: 100 } img { width: 200 height: 200 } ul { list-style-type: height: 200 } ul li { display: } &/style& &script src="js/Jquery1.7.js" type="text/javascript"&&/script& &script src="js/jquery.ui.core.js" type="text/javascript"&&/script& &script src="js/jquery.ui.widget.js" type="text/javascript"&&/script& &script src="js/jquery.ui.mouse.js" type="text/javascript"&&/script& &script src="js/jquery.ui.draggable.js" type="text/javascript"&&/script& &script type="text/javascript"& $(function () { //存储的是被拖动的图片的初始坐标 var startleft = 0; var starttop = 0; $('img').draggable({ start: function () { //为两个变量设置被拖动图片的初始坐标 startleft = $(this).offset(). starttop = $(this).offset(). }, stop: function () { if ($(this).offset().left & $('#mydiv').offset().left + $('#mydiv').width() || $(this).offset().top & $('#mydiv').offset().top + $('#mydiv').height()) { $(this).remove(); } else { //复位 $(this).offset({ left: startleft, top: starttop }) } } }); }) &/script& &/head& &body& &div id="mydiv"& &ul& &li& &img src="images/img2.jpg" /&&/li& &li& &img src="images/img3.jpg" /&&/li& &li& &img src="images/img4.jpg" /&&/li& &li& &img src="images/img5.jpg" /&&/li& &/ul& &/div& &/body&
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具Jquery Div自由拖动排序
Jquery Div自由拖动排序
Jquery Div自由拖动排序,兼容性：IE7以上以及其他主流浏览器（Chrome,FireFox,Safari...)。排序是采用2个Div模块（源模块和目标模块）位置对调。其他位置不变。拖动的时候保存当前的Div模块的位置。主要核心就是在拖动目标元素时，检测当前的鼠标指针是否移入了除目标元素之外的其他DIV模块中，如果有，就可以作为交换位置事件开始。更新保存的Div模块位置，以备下一次轮换时需要。主要原理就这么多，这种直接交互2个模块位置的难度不大。Jq代码：var&SortDivHandler&=&{
CurrentLocationX:&0,
CurrentLocationY:&0,
CurrentSortFlag:&0,
CurrentSortDiv:&null,
CurrentSortMove:&0,
Initialize:&function()&{
var&isStart&=&
var&sortItemCount&=&parseInt(($(&#SortContaint&).width()&-&90)&/&300);
for&(var&i&=&0;&i&&&$(&.SortItem&).&i&&)&{
var&floorCount&=&Math.ceil((i&&&1)&/&sortItemCount);
$($(&.SortItem&)[i]).attr(&id&,&i);
$($(&.SortItem&)[i]).html(i&&&1);
if&((i&&&1)&&3)&{
var&itemIndex&=&(i)&%&3;
$($(&.SortItem&)[i]).animate({
left:&30&&&itemIndex&*&200&&&(itemIndex&-&1)&*&30&&&&px&,
top:&(floorCount&-&1)&*&120&&&30&*&(floorCount&-&1)&&&30
},&300&&&i&*&100);
var&isDrag&=&
$(&.SortItem&).mousedown(function(e)&{
var&SortTarget&=&$(this);
SortDivHandler.CurrentSortMove&=&0;
SortDivHandler.CurrentSortDiv&=&$(this);
$(&.SortItem&).css(&z-index&,&1);
SortDivHandler.CurrentSortDiv.css(&z-index&,&-1).css(&opacity&,&0.8);
SortDivHandler.CurrentLocationX&=&SortTarget.offset().
SortDivHandler.CurrentLocationY&=&SortTarget.offset().
SortTarget.attr(&drag&,&1);
SortTarget.css(&position&,&&absolute&);
SortTarget.css(&cursor&,&&default&);
var&currentTarget&=&SortT
var&currentDisX&=&e.pageX&-&$(this).offset().
var&currentDisY&=&e.pageY&-&$(this).offset().
$(document).mousemove(function(event)&{
if&($(currentTarget).attr(&drag&)&==&0&||&SortDivHandler.CurrentSortMove&==&1)&
var&currentX&=&event.clientX;
var&currentY&=&event.clientY;
var&cursorX&=&event.pageX&-&currentDisX;&//&$(this).offset().&&
var&cursorY&=&event.pageY&-&currentDisY;&//-$(this).offset().&
//&$(currentTarget)
$(currentTarget).css(&top&,&cursorY&-&8&&&&px&).css(&left&,&cursorX&-&30&&&&px&);
isStart&=&
$(document).mouseup(function()&{
//&&if(isDrag==false)
$(currentTarget).attr(&drag&,&0);
$(&.SortItem&).mousemove(function()&{
if&(isStart&==&false)&
if&(SortDivHandler.CurrentSortFlag&==&0)&{
if&($(this).attr(&id&)&==&SortDivHandler.CurrentSortDiv.attr(&id&))&{
if&(SortDivHandler.CurrentSortMove&==&1)&
SortDivHandler.CurrentSortMove&=&1;
var&targetX&=&$(this).offset().
var&targetY&=&$(this).offset().
SortDivHandler.CurrentSortDiv.stop(true).animate({
left:&targetX&-&30&&&&px&,
top:&targetY&-&8&&&&px&
},&500,&function()&{
$(this).css(&opacity&,&1);
$(this).stop(true).animate({
left:&SortDivHandler.CurrentLocationX&-&30&&&&px&,
top:&SortDivHandler.CurrentLocationY&-&8&&&&px&
},&300,&function()&{});
$(&.SortItem&).mouseup(function()&{
if&(isDrag&==&false)&
SortDivHandler.CurrentSortMove&=&1;
SortDivHandler.CurrentSortDiv.stop(true).animate({
left:&SortDivHandler.CurrentLocationX&-&30&&&&px&,
top:&SortDivHandler.CurrentLocationY&-&8&&&&px&
},&500,&function()&{
SortDivHandler.CurrentSortDiv.css(&z-index&,&-1).css(&opacity&,&1);
在线二维码生成
在线加密解密
Copyright 2017 Pengyaou版权所有JQuery实现元素移动位置有很多种方法，其中一个是根据鼠标在指定区域内随意移动，还有一种的是根据方向键在一定区域内上下左右平移。这二种只能说各有优劣，通过方向键平移，实现相对简单，操作也更具备可控性，但是就是移动效率相对较低，每次平移量过大造成不够精准，平移量过小则会使移动过程更为繁琐。跟随鼠标自由移动，可以自由控制平移量，精准的移动到自己想要的位置，但是实现较为复杂，并且控制过程中容易出现体验卡顿等。
一 根据方向键移动
&div class="content_room"&
&div class="room_text"&欢迎各位领导前来视察工作&/div&
&div class="add_metting_list"&
&div class="subject_title"&调整内容区位置：&/div&
&div class="control_direction"&
&div class="top"&&img src="img/top.png"&&/div&
&div class="left"&&img src="img/left.png"&&/div&
&div class="right"&&img src="img/right.png"&&/div&
&div class="bottom"&&img src="img/bottom.png"&&/div&
& &/div&```
jQuery部分，仅展示出上升部分，下左右类似。
$(".top").click(function () {
var top=$(".room_text").css("top");
var top_num =top.replace('px','');
var top_new=top_num*1-5*1;
if(top_new&5){
alert("已到顶部");
var top_css=top_new+'px';
$(".room_text").css('top',top_css);
二 根据鼠标在指定区域内随意移动
标题，内容，下标区都可以根据鼠标在指定区域块移动
&div class="card" id="title"&
&!--&img src="img/loginbg.png"
&div class="first_line"&成都超极限文化传播有限公司&/div&
&div class="second_line"&王欻欻&/div&
&div class="third_line"&职务：软件工程师&/div&
jQuery部分
var x1,y1,x2,y2,offleft,offtop,isclik=0;
$(function() {
var wmax=500-$(".first_line").width();
var hmax=300-$(".first_line").height();
$(".first_line").mousedown(function(e){
x1=e.pageX;
y1=e.pageY;
offleft=parseInt($(".first_line").css('left'));
offtop=parseInt($(".first_line").css('top'));
$(".card").mousemove(function(e){
if(isclik==1){
x2=e.pageX;
y2=e.pageY;
var xx=x2-x1+
var yy=y2-y1+
if(xx&=0&&xx&wmax){
$(".first_line").css('left',xx+"px");
if(yy&=0&&yy&hmax-1){
$(".first_line").css('top',yy+"px");
}).mouseup(function(){
second_line和third_line的移动类似，只需要改动部分变量名。
这里主要是一个html截图与jQuery实现代码，具体细节欢迎留言讨论。
使用jQuery实现元素拖动的要点
jQuery实现拖动
javaScript+css+html——通过鼠标进行图片拖动
通过鼠标的移动让图片移动
JQuery实现元素拖拽功能（未来元素，可输入框修改）
HTML5下DOM元素在窗口中拖动（更改位置）
jquery判断鼠标移动方向--版本2
jq实现鼠标拖拽效果
没有更多推荐了，在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
好像是需要用到touchmove事件，可否贴出代码来参考一下，或者比较好用的插件，谢谢
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
你可以查看jQuery UI Touch Punch, 你会为之惊叹的。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
这个元素给absolute
外层父元素relative
然后加上touchmove事件，代码很简单啊
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我建议自己写，移动端主要是 通过 touchstart 、touchmove、和 touchend来实现拖动效果。
可以写这样一段小小的代码 ：
var ele = document.getElementById("drag");
var moving = function(e){
mouseup = function(e){
document.removeEventListener("touchmove", moving);
document.removeEventListener("touchend", mouseup);
ele.addEventListener("touchstart",function(e){
event.preventDefault();
item.set_prop("isMoving", true);
document.addEventListener("touchmove", moving,false);
document.addEventListener("touchend", mouseup,false);
1.必须在拖动出发的时候禁用屏幕滚动和缩放，比如 上面的event.preventDefault();
2.必须在拖动完成之后remove 之前注册的事件。
请叫我最亚伦。。哈哈
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
hammerjs这个库中提供了拖动元素的事件，可以试试。
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。