<html>
<head>
<title>拖放效果</title>
<style>
#idContainer{
border:10px
solid #990000;
width:600px;
height:300px;
}
#idDrag{
border:5px solid #C4E3FD;
background:#C4E3FD;
width:50px;
height:50px;
margin:50px;
}
#idHandle{
cursor:move;
height:25px;
background:#0000FF;
overflow:hidden;
}
</style>
</head>
<body>
<script>
var isIE = (document.all) ? true : false;
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);
}
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);
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)";
}
}
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; }
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来相对定位，并在获取offset之前设置
!this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || (this._mxContainer.style.position = "relative");
}
//记录鼠标相对拖放对象的位置
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();
},
//拖动
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>
<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; }
$("idLimitOff").onclick = function(){ drag.Limit = false; }
</script>
</body>
</html>
分享到：
发表评论
相关推荐
这个"网文拖放保存_有源码"项目就是一个典型的例子，它着重解决在拖放操作中保存文本文件时可能出现的中文乱码问题。下面将详细讨论这个主题中的关键知识点。 1. **拖放操作(Drag and Drop)** - 拖放操作是Windows...
本资源“易语言无边框拖放源码.7z”是一个易语言编写的程序源代码，特别之处在于实现了无边框窗口并支持拖放功能。这种功能在很多桌面应用中非常实用，例如文件管理器、媒体播放器等，用户可以通过拖拽操作来方便地...
在这个特定的资源中，"asp.net 图像和图像文件的拖放源码"，我们关注的是如何在ASP.NET环境中实现图像和图像文件的拖放功能。拖放技术是用户界面设计中的一个重要特性，它允许用户通过简单的鼠标操作来移动或传输...
4. 遍历文件列表，根据需要对每个文件执行相应的操作，如读取、保存或打开文件。 5. 文件处理完毕后，调用`DragFinish()`释放资源。 在压缩包中的`content.txt`文件，可能包含了易语言实现这一功能的源代码示例。...
- 处理文本文件内容，如保存到数据库、进行文本分析等。 4. **安全性和优化**： - 对于上传的文件大小进行限制，防止DoS攻击。 - 使用验证控件（如`FileUploadValidator`）确保只接受特定类型的文件。 - 对于大...
【网页文件拖放器 Delphi 源码】是一个基于Delphi编程语言开发的应用程序，主要功能是方便用户处理分页的网页内容。在互联网上，很多文章为了提高页面加载速度或者阅读体验，可能会被分割成多个页面。这种情况下，...
描述中提到"源码为vs2010/2012+jqueryui实现"，这表明开发环境是Visual Studio 2010或2012，同时前端交互部分依赖于jQuery UI库，特别是其拖放(Draggable and Droppable)组件。jQuery UI是一个强大的JavaScript库，...
如果在此期间找到了目标窗口句柄，可以执行相应的操作，如显示窗口信息、保存句柄供后续使用等。 6. **错误处理**: 为了提高程序的健壮性，需要添加适当的错误处理机制，比如处理找不到窗口句柄的情况。 在代码...
源码部分，虽然没有提供具体代码，但我们可以想象其结构可能包括以下几个关键部分： 1. 注册拖放接收器：通过设置窗口类的风格，使窗口能够接受拖放操作。 2. 处理WM_DROPFILES消息：当接收到此消息时，遍历传递的...
此外，作为一款源码资源，网文拖放器的代码结构清晰，易于理解和修改。开发者可以借此学习到如何实现实时的用户交互处理，以及如何在浏览器环境中处理和存储数据。对于想要定制自己专属信息管理工具的程序员来说，这...
拖放功能则为用户提供了一种直观且便捷的操作方式，用户可以直接将图标文件拖放到程序界面上，而程序会自动处理这些图标并进行相应的操作，如显示、保存或分析图标。 "图形图像源码"这个标签进一步明确了这个源码是...
0. 基于HTML5拖放功能，动态拖放并自动实时保存布局。 1. 前后端分离：前端 Echarts JavaScript BootStrap; 后端Python Flask； 2. 数据动态更新：服务端触发数据源的变化，前端AJAX自动获取最新数据并渲染到Echarts...
这种源码通常包括处理图像的各种PHP脚本和可能的前端交互界面，使得用户可以上传图片、编辑、保存而无需在本地安装完整的Photoshop软件。 描述中的“在线ps源码，远程调用，不吃服务器配置，上传即可用”，说明这个...
在本文中，我们将深入探讨基于C#的标签设计与打印软件源码，它提供了一种高效的方法来创建自定义的标签打印模板，并且具有拖放式组件功能，支持模板保存到文件，兼容各种标签打印机，同时也允许进行二次开发。...
这里的 `list` 是一个 Vue 数据对象，用来保存可拖放的元素列表。 Vue.Draggable 提供了一些重要的属性和事件，以定制拖放行为。例如，`group` 属性用于设置拖放组，使得元素可以在同一组内的组件间移动；`handle` ...
通过对这些知识点的理解和应用，开发者可以利用易语言实现从文件中提取图标并保存为ICO格式的功能，这对于开发需要自定义图标的应用程序非常实用。学习并掌握这部分源码，对于提升易语言编程技能和理解系统资源操作...
4. **界面编辑器功能**：此编辑器可能包括拖放设计、控件属性设置、布局管理、预览等功能。理解这些功能的实现原理有助于学习易语言GUI开发。 5. **源码组织结构**：了解源码的模块化设计，包括主程序、界面组件、...
用户可以直接在浏览器中打开文本文件进行编辑，保存后更改会实时同步到服务器，无需下载后再上传，极大地提升了工作效率。这通常依赖于AJAX技术实现异步通信，以及PHP的文件I/O函数来读写文件内容。 在安全性方面，...
这个记事本源码中可能包含了如何使用`TIniFile`来保存用户自定义的字体、颜色等设置。通过`TIniFile.ReadString`和`TIniFile.WriteString`方法，我们可以轻松地在运行时访问和修改这些配置。 2. **文件拖放打开** ...
查看源码，了解如何使用它们来改善用户体验，如保存用户设置或实现购物车功能。 5. **Canvas绘图**：HTML5的元素允许在网页上进行动态图形绘制。通过源码，你可以学习到如何使用JavaScript API在canvas上创建交互式...