一款很不错的Js控制div层拖动/拖放代码

最新推荐文章于 2019-09-24 14:21:53 发布
最新推荐文章于 2019-09-24 14:21:53 发布
阅读量96 收藏
点赞数
文章标签： xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>一款很不错的Js控制div层拖动/拖放代码</title>
</head>

<body>

<script>

var isIE = (document.all) ? true : false;
// Demo by /
var $ = function (id) {
 return "string" == typeof id ? document.getElementById(id) : id;
};

var Class = {
 create: function() {
  return function() { this.initialize.apply(this, arguments); }
 }
}

var Extend = function(destination, source) {
 for (var property in source) {
  destination[property] = source[property];
 }
}

var Bind = function(object, fun) {
 return function() {
  return fun.apply(object, arguments);
 }
}

var BindAsEventListener = function(object, fun) {
 return function(event) {
  return fun.call(object, (event || window.event));
 }
}

var CurrentStyle = function(element){
 return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}

// Demo by /
function addEventHandler(oTarget, sEventType, fnHandler) {
 if (oTarget.addEventListener) {
  oTarget.addEventListener(sEventType, fnHandler, false);
 } else if (oTarget.attachEvent) {
  oTarget.attachEvent("on" + sEventType, fnHandler);
 } else {
  oTarget["on" + sEventType] = fnHandler;
 }
};

function removeEventHandler(oTarget, sEventType, fnHandler) {
    if (oTarget.removeEventListener) {
        oTarget.removeEventListener(sEventType, fnHandler, false);
    } else if (oTarget.detachEvent) {
        oTarget.detachEvent("on" + sEventType, fnHandler);
    } else { 
        oTarget["on" + sEventType] = null;
    }
};

//拖放程序
var Drag = Class.create();
Drag.prototype = {
  //拖放对象
  initialize: function(drag, options) {
 this.Drag = $(drag);//拖放对象
 this._x = this._y = 0;//记录鼠标相对拖放对象的位置
 this._marginLeft = this._marginTop = 0;//记录margin
 //事件对象(用于绑定移除事件)
 this._fM = BindAsEventListener(this, this.Move);
 this._fS = Bind(this, this.Stop);
 
 this.SetOptions(options);
 // Demo by /
 this.Limit = !!this.options.Limit;
 this.mxLeft = parseInt(this.options.mxLeft);
 this.mxRight = parseInt(this.options.mxRight);
 this.mxTop = parseInt(this.options.mxTop);
 this.mxBottom = parseInt(this.options.mxBottom);
 
 this.LockX = !!this.options.LockX;
 this.LockY = !!this.options.LockY;
 this.Lock = !!this.options.Lock;
 
 this.onStart = this.options.onStart;
 this.onMove = this.options.onMove;
 this.onStop = this.options.onStop;
 
 this._Handle = $(this.options.Handle) || this.Drag;
 this._mxContainer = $(this.options.mxContainer) || null;
 
 this.Drag.style.position = "absolute";
 //透明
 if(isIE && !!this.options.Transparent){
  //填充拖放对象
  with(this._Handle.appendChild(document.createElement("div")).style){
   width = height = "100%"; backgroundColor = "#fff"; filter = "alpha(opacity:0)"; fontSize = 0;
  }
 }
 //修正范围
 this.Repair();
 addEventHandler(this._Handle, "mousedown", BindAsEventListener(this, this.Start));
  },
  //设置默认属性
  SetOptions: function(options) {
 this.options = {//默认值
  Handle:   "",//设置触发对象（不设置则使用拖放对象）
  Limit:   false,//是否设置范围限制(为true时下面参数有用,可以是负数)
  mxLeft:   0,//左边限制
  mxRight:  9999,//右边限制
  mxTop:   0,//上边限制
  mxBottom:  9999,//下边限制
  mxContainer: "",//指定限制在容器内
  LockX:   false,//是否锁定水平方向拖放
  LockY:   false,//是否锁定垂直方向拖放
  Lock:   false,//是否锁定
  Transparent: false,//是否透明
  onStart:  function(){},//开始移动时执行
  onMove:   function(){},//移动时执行
  onStop:   function(){}//结束移动时执行
 };
 Extend(this.options, options || {});
  },
  //准备拖动
  Start: function(oEvent) {
 if(this.Lock){ return; }
 this.Repair();
 //记录鼠标相对拖放对象的位置
 this._x = oEvent.clientX - this.Drag.offsetLeft;
 this._y = oEvent.clientY - this.Drag.offsetTop;
 //记录margin
 this._marginLeft = parseInt(CurrentStyle(this.Drag).marginLeft) || 0;
 this._marginTop = parseInt(CurrentStyle(this.Drag).marginTop) || 0;
 //mousemove时移动 mouseup时停止
 addEventHandler(document, "mousemove", this._fM);
 addEventHandler(document, "mouseup", this._fS);
 if(isIE){
  //焦点丢失
  addEventHandler(this._Handle, "losecapture", this._fS);
  //设置鼠标捕获
  this._Handle.setCapture();
 }else{
  //焦点丢失
  addEventHandler(window, "blur", this._fS);
  //阻止默认动作
  oEvent.preventDefault();
 };
 //附加程序
 this.onStart();
  },
  //修正范围
  Repair: function() {
 if(this.Limit){
  //修正错误范围参数
  this.mxRight = Math.max(this.mxRight, this.mxLeft + this.Drag.offsetWidth);
  this.mxBottom = Math.max(this.mxBottom, this.mxTop + this.Drag.offsetHeight);
  //如果有容器必须设置position为relative或absolute来相对或绝对定位，并在获取offset之前设置
  !this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || CurrentStyle(this._mxContainer).position == "absolute" || (this._mxContainer.style.position = "relative");
 }
  },
  //拖动
  Move: function(oEvent) {
 //判断是否锁定
 if(this.Lock){ this.Stop(); return; };
 //清除选择
 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
 //设置移动参数
 var iLeft = oEvent.clientX - this._x, iTop = oEvent.clientY - this._y;
 //设置范围限制
 if(this.Limit){
  //设置范围参数
  var mxLeft = this.mxLeft, mxRight = this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom;
  //如果设置了容器，再修正范围参数
  if(!!this._mxContainer){
   mxLeft = Math.max(mxLeft, 0);
   mxTop = Math.max(mxTop, 0);
   mxRight = Math.min(mxRight, this._mxContainer.clientWidth);
   mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight);
  };
  //修正移动参数
  iLeft = Math.max(Math.min(iLeft, mxRight - this.Drag.offsetWidth), mxLeft);
  iTop = Math.max(Math.min(iTop, mxBottom - this.Drag.offsetHeight), mxTop);
 }
 //设置位置，并修正margin
 if(!this.LockX){ this.Drag.style.left = iLeft - this._marginLeft + "px"; }
 if(!this.LockY){ this.Drag.style.top = iTop - this._marginTop + "px"; }
 //附加程序
 this.onMove();
  },
  //停止拖动
  Stop: function() {
 //移除事件
 removeEventHandler(document, "mousemove", this._fM);
 removeEventHandler(document, "mouseup", this._fS);
 if(isIE){
  removeEventHandler(this._Handle, "losecapture", this._fS);
  this._Handle.releaseCapture();
 }else{
  removeEventHandler(window, "blur", this._fS);
 };
 //附加程序
 this.onStop();
  }
};
</script>

<style>
#idContainer{ border:10px solid #990000; width:600px; height:300px;}
#idDrag{ border:5px solid #C4E3FD; background:#C4E3FD; width:50px; height:50px; top:50px; left:50px;}
#idHandle{cursor:move; height:25px; background:#0000FF; overflow:hidden;}
</style>

<div id="idContainer">
<div id="idDrag"><div id="idHandle"></div></div>
</div>

<input id="idReset" type="button" value="复位" />
<input id="idLock" type="button" value="锁定" />
<input id="idLockX" type="button" value="锁定水平" />
<input id="idLockY" type="button" value="锁定垂直" />
<input id="idLimit" type="button" value="范围锁定" />
<input id="idLimitOff" type="button" value="取消范围锁定" />
<br />拖放状态：<span id="idShow">未开始</span>

<script>
var drag = new Drag("idDrag", { mxContainer: "idContainer", Handle: "idHandle", Limit: true,
 onStart: function(){ $("idShow").innerHTML = "开始拖放"; },
 onMove: function(){ $("idShow").innerHTML = "left："+this.Drag.offsetLeft+"；top:"+this.Drag.offsetTop; },
 onStop: function(){ $("idShow").innerHTML = "结束拖放"; }
});

$("idReset").onclick = function(){
 drag.Limit = true;
 drag.mxLeft = drag.mxTop = 0;
 drag.mxRight = drag.mxBottom = 9999;
 drag.LockX = drag.LockY = drag.Lock = false;
}

$("idLock").onclick = function(){ drag.Lock = true; }
$("idLockX").onclick = function(){ drag.LockX = true; }
$("idLockY").onclick = function(){ drag.LockY = true; }
$("idLimit").onclick = function(){  drag.mxRight = drag.mxBottom = 200;drag.Limit = true; }
$("idLimitOff").onclick = function(){ drag.Limit = false; }
</script>

</body>
</html>
<p align="center">本特效收集于互联网，只为兴趣与学习交流，不作商业用途。</p>
weixin_34029949
关注
原生JS八个点控制DIV大小
11-11
原生JS八个点控制DIV大小，完美无错
JS——实现左右可拖动改变宽度的div内容显示区，并且控制拖动范围
BetterGG的博客
04-11 7048
转自：https://www.jianshu.com/p/014380e6ae50 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia...
可移动弹窗，解决mouseup事件丢失问题
qq_36154659的博客
09-24 596
可移动弹窗，解决mouseup事件丢失问题 (function(){ //节流函数，提高流畅性 let throttle = function(){ let fn; fn = arguments[0]; if(fn._throttleID){ return; }else{ ...
拖拽 DIV
weixin_30955341的博客
09-11 90
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &lt...
jQuery实现自由拖动DIV插件
summer7310的专栏
01-12 7210
实现简单Div的拖动效果，主要分为三步。 1，需要拖动的Div拖动绑定，mousedown事件，鼠标mousedown的时候记录此时的鼠标相对浏览器的x轴和y轴，以及需要拖动Div的相对浏览器的left，top值，并且给拖曳标记赋值为true,代表拖动动作就绪。 2，绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用实现拖动区域的Div上绑定事件，而不用DIV元素的事件 ，mou
js div浮动层拖拽效果代码
11-10
在JavaScript编程中，实现`div`浮动层的拖拽效果是一项常见的需求，特别是在网页交互设计中。这个场景通常涉及到事件监听、元素定位以及鼠标坐标计算等技术。下面将详细讲解如何利用JavaScript实现这一功能。 首先...
js div浮动层拖拽效果代码.zip
07-04
在这个“js div浮动层拖拽效果代码.zip”中，包含的是一段实现HTML `<div>` 元素可拖动功能的JS代码。这个功能常见于创建浮动窗口、对话框或者自定义控件，使用户可以通过鼠标操作移动这些元素在页面上的位置。 ...
[removed]Div层拖动效果实例代码
10-27
标题中的“Div层拖动效果实例代码”是指在网页设计中使用JavaScript实现的可拖动的Div元素功能。Div是HTML中的一个块级元素，常用于布局和分隔页面内容。拖动效果允许用户通过鼠标点击并移动来改变Div元素在页面上的...
jQuery拖动吸附栅格内对齐代码.rar_babyj2s_div 吸附 拖拉_jQuery拖动吸附栅格内对齐代码_js 拖拽对
09-15
"js_拖拽对齐"和"stomachl54"标签可能代表这个功能的关键词或作者名称，而"babyj2s div_吸附_拖拉"可能是一个项目名称或者某种特定的实现方式。这个代码示例可以帮助开发者理解如何在jQuery中实现复杂的拖动吸附功能...
JS实现网页Div层Clone拖拽效果
11-25
【JS实现网页Div层Clone拖拽效果】 在网页开发中，动态交互的用户体验往往能提升用户的满意度。本文将深入探讨如何使用JavaScript实现Div层的拖拽及Clone效果。这一技术可以使用户通过鼠标拖动Div元素，使其在网页...
实现div拖拽的几种方式
Hiqingtian的博客
03-23 9936
&lt;%@page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;jQuery拖放&lt;/title&gt; &lt;scri
jquery mouseup 事件属性丢失
只有准备爆发，才会甘于沉默
04-10 561
最近在写js,啊，js跨浏览器事件丢失太多了，有jquery也一样。。 笔者最近写一个demo...这个问题困扰了我1个星期。。。 上代码说明原因吧： $("#div1").mouseup(function(e) { alert(e.target.id); });   我很希望获取到 鼠标松后的对象的所触发的dom对象的ie...页面所有元素都有id。。。  最后解决了 $("...
当拖拽事件mouseup失效时
weixin_44900249的博客
05-28 4007
有时候会出现拖拽mouseup失效,某div一直跟着鼠标甩不掉,mouseup中的$(".box").mousemove=null无效 这个时候 把mouseup事件中改为: $(document).mouseup(function (e) { $(this).unbind('mousemove'); }); 用unbind,移除此元素的事件 括号里不填就是移除所有事件 我填了mou...
使用javascript灵活控制DIV的位置
weixin_34357962的博客
01-11 140
使DIV始终居于屏幕中间的方法 方法1： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns=" http://www.w3.org/1999/xhtml"&...
拖拽之mouseup问题
qq_40285497的博客
08-15 2006
今天做一个拖拽案例，就是滚动条的一部分。当鼠标移动到滑块上并且按下时，给document绑定mousemove事件，当鼠标放开时解除mousemove事件，代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Ti
javaScript -鼠标拖拽
zyljjf的博客
09-26 278
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; padding: 0; }
DIV 点击拖动，纯JS 实现。
qq_32214375的博客
09-05 2210
   由于公司需要，需要制作了一个div拖动的功能，经过各种百度后终于完成了，记录一下操作步骤，也希望给大家带来一些便捷。    首先我先描述一下我做的功能要达到的效果，其实就是制作一个在线编辑电子证书模板的功能，用户可以自己的添加各种文本，图片，印章，而且可以随意的在模板上拖动。    由于是多个div 可以随意拖动，所以把拖动的代码都封装成了一个方法。   2.创建最外层的一个固定...
div拖拽时取消文字选中默认事件的解决方法
swallowliyan的专栏
08-27 9426
当我们对div进行拖 拽时，会发现把div里的文字也选中了，其实我并不想选中文字 ，怎么解决呢？ 我们分两种情况说，一种情况是直接给对象加事件如obj.onmousedown； 另外一种是为对象绑定事件addEventListener。 先说第一种：比较简单，高版本的浏览直接加return false来阻止默认事件，低版本的IE系列则用obj.capature&&obj.capature();
jQuery实现div元素间拖放交互实例与代码解析
本文将深入解析如何使用jQuery实现两个div中的元素进行相互拖动功能。作者通过实例展示了如何利用jQuery UI库来实现实时的拖放交互，包括拖动和拖放完成后的效果。以下是关键知识点的详细讲解： 1. **jQuery UI库的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值