页面中拖拽效果的实现

可拖放DOM模式（Draggable DOM pattern）可以让用户在Web页面中对各个部分进行编辑，即只需要选中要移动的部分，将其拖拽到新的位置上，就可以重新安排整个页面的布局效果，下面介绍一下具体的实现方式。

在Eclipse中新建一个项目，项目的名称为“P45_DropDrag”。首先，新建一个HTML文档，页面名称为“main.html”。该页面实现的效果如图4-6所示。当用户使用鼠标选中对应的方框时，就可以通过拖拽调整其在页面中的位置。

图 4-6 拖拽效果

本例中所使用的HTML文档的源代码如下所示。注意在本页面中调用了一个开源框架中有关定位的JavaScript脚本文件，读者可以参考本书配套光盘中的源代码。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<HTML>

<HEAD>

</HEAD>

<body>

<div id="news" class="text"> 欢迎使用拖拽功能 </div>

</div>

</form>

// 初始化新闻面板的拖动效果

var news_handle = document.getElementById("news_handle");

var news_root = document.getElementById("news_root");

Drag.init(news_handle, news_root);

news.style.backgroundColor = "#ffff00";

news.style.cursor = "hand";

</script>

</body>

</HTML>

层叠样式表文件对应的代码如下：

.root

{

position:absolute;

height:150px; width:200px;

border:1px solid #333;

BACKGROUND-COLOR: #eee

}

.handle

{

margin:2px;

padding:2px;

width:194px;

color:white;

background-color:navy;

font-size:12px;

}

.text

{

color:navy;

font-size:12px;

}

/**************************************************
* dom-drag.js
* 09.25.2001
* www.youngpup.net
**************************************************
* 10.28.2001 - fixed minor bug where events
* sometimes fired off the handle, not the root.
**************************************************/

var Drag = {

obj : null,

init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
{
o.onmousedown = Drag.start;

o.hmode = bSwapHorzRef ? false : true ;
o.vmode = bSwapVertRef ? false : true ;

o.root = oRoot && oRoot != null ? oRoot : o ;

if (o.hmode && isNaN(parseInt(o.root.style.left ))) o.root.style.left   = "0px";
  if (o.vmode && isNaN(parseInt(o.root.style.top   ))) o.root.style.top    = "0px";
  if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right = "0px";
  if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";

o.minX = typeof minX != 'undefined' ? minX : null;
  o.minY = typeof minY != 'undefined' ? minY : null;
  o.maxX = typeof maxX != 'undefined' ? maxX : null;
  o.maxY = typeof maxY != 'undefined' ? maxY : null;

o.xMapper = fXMapper ? fXMapper : null;
o.yMapper = fYMapper ? fYMapper : null;

o.root.onDragStart = new Function();
o.root.onDragEnd = new Function();
o.root.onDrag = new Function();
},

start : function(e)
{
  var o = Drag.obj = this;
  e = Drag.fixE(e);
  var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
  var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
  o.root.onDragStart(x, y);

o.lastMouseX = e.clientX;
o.lastMouseY = e.clientY;

if (o.hmode) {
   if (o.minX != null) o.minMouseX = e.clientX - x + o.minX;
   if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX;
  } else {
   if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
   if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
  }

if (o.vmode) {
   if (o.minY != null) o.minMouseY = e.clientY - y + o.minY;
   if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY;
  } else {
   if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
   if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
  }

document.onmousemove = Drag.drag;
document.onmouseup = Drag.end;

return false;
},

drag : function(e)
{
e = Drag.fixE(e);
var o = Drag.obj;

var ey = e.clientY;
  var ex = e.clientX;
  var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
  var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
  var nx, ny;

if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
  if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
  if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
  if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);

nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));

if (o.xMapper) nx = o.xMapper(y)
else if (o.yMapper) ny = o.yMapper(x)

Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
  Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
  Drag.obj.lastMouseX = ex;
  Drag.obj.lastMouseY = ey;

Drag.obj.root.onDrag(nx, ny);
return false;
},

end : function()
{
  document.onmousemove = null;
  document.onmouseup   = null;
  Drag.obj.root.onDragEnd( parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]),
         parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
  Drag.obj = null;
},

fixE : function(e)
{
  if (typeof e == 'undefined') e = window.event;
  if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
  if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
  return e;
}
};

页面中拖拽效果的实现相关推荐

Javascript实现拖拽效果
我们执行拖拽操作时, 1.按住某元素 2.移动鼠标 3.移动鼠标到相应位置后松开鼠标基于以上操作,页面拖拽效果需要三个事件 onmousedown onmousemove onmouseup 在on ...
java 企业信息门户拖拽排版_web中拖拽排序与java后台交互实现
一.业务需求 1,在后台的管理界面通过排序功能直接进入排序界面 2,在排序界面能够人工的手动拖动需要排序的标题,完成对应的排序之后提交 3,在app或者是前端就有对应的排序实现了二.页面展示将整体 ...
html5 原生拖拽,原生JS实现拖拽效果
这篇文章主要为大家详细介绍了原生JS实现拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下 ...
移动端实现图标拖拽效果
做一个像苹果手机桌面的HOME键一样的图标,实现图标按钮在页面上可拖拽效果.js代码如下: window.onload = function () {var oDiv = document.getEl ...
【PPT】2010/2013/2016实现在演示过程中拖拽图片/形状
如果有需要在PPT演示过程中简单拖拽一些元素的功能,那么这篇文章绝对能帮助你在上一篇文章分泌蛋白过程操作动画中提及到实现PPT演示过程中拖拽元素的方法,这篇写出详细过程. 先说明几点: ...
Android实现高德地图上拉,ScrollLayout：上拉滑动上滑拖出，类似高德地图百度地图抽屉拖拽效果...
摘要在ScrollView或者ListView里面使用ViewPager.支持手势上拉滑出,中途停顿,下滑退出页面,类似高德地图百度地图内场景抽屉拖拽效果效果 Gif动画类似使用 Demo 下载A ...
React.js实现原生js拖拽效果及思考
一.起因&思路不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
Vue中实现拖拽效果
Vue2项目中遇到需求要求页面左侧部分实现拖拽效果实现效果: 1665739151500 实现代码: 一.使用盒子包裹需要拖拽的区域,并绑定ref 二.使用$ref获取DOM信息具体代码(这个方法 ...
DOM 案例——(美团外卖下拉框菜单、半透明——信息滑入、模态窗口拖拽效果、放大镜效果、滚动条滑到一定位置的固定导航栏、12306购票网站多级联动、斗鱼TV无规则弹幕特效、百度搜索条动态输入下拉瀑布)
目录 1.缓动动画--美团外卖下拉框菜单 2.半透明--信息滑入 3.模态窗口拖拽效果 4.放大镜效果 5.滚动条滑到一定位置的固定导航栏 6.12306购票网站多级联动 7.斗鱼TV无规则弹幕特效 ...

页面中拖拽效果的实现

页面中拖拽效果的实现相关推荐

最新文章

热门文章