拖动一个HTML元素

2024-12-19 07:47:50

// Demo 0 variables
var DragDrops = [];
var curTarget = null;
var lastTarget = null;

function makeDraggable(item){
  if(!item) return;
  item.onmousedown = function(ev){
    dragObject = this;
    mouseOffset = getMouseOffset(this, ev);
    return false;
  }
}

function getMouseOffset(target, ev){
ev = ev || window.event;

var docPos = getPosition(target);
var mousePos = mouseCoords(ev);
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

function getPosition(e){
  var left = 0;
  var top = 0;
  while (e.offsetParent){
    left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
    top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
    e = e.offsetParent;
  }

left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);

return {x:left, y:top};

}

function mouseCoords(ev){
  if(ev.pageX || ev.pageY){
    return {x:ev.pageX, y:ev.pageY};
  }
  return {
    x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
    y:ev.clientY + document.body.scrollTop - document.body.clientTop
  };
}

function mouseDown(ev){
ev = ev || window.event;
var target = ev.target || ev.srcElement;

if(target.onmousedown || target.getAttribute('DragObj')){
return false;
}
}

function mouseUp(ev){

//dragObject = null;

if(dragObject){
ev = ev || window.event;
var mousePos = mouseCoords(ev);

iMouseDown = false;
}

function mouseMove(ev){
ev = ev || window.event;

/*
We are setting target to whatever item the mouse is currently on

Firefox uses event.target here, MSIE uses event.srcElement
  */
  var target = ev.target || ev.srcElement;
  var mousePos = mouseCoords(ev);

if(dragObject){
    dragObject.style.position = 'absolute';
    dragObject.style.top = mousePos.y - mouseOffset.y;
    dragObject.style.left = mousePos.x - mouseOffset.x;
  }

// track the current mouse state so we can compare against it next time
lMouseState = iMouseDown;

// this prevents items on the page from being highlighted while dragging
if(curTarget || dragObject) return false;
}

function addDropTarget(item, target){
item.setAttribute('droptarget', target);
}

document.onmousemove = mouseMove;
document.onmousedown = mouseDown;
document.onmouseup = mouseUp;

window.onload = function (){
  makeDraggable(document.getElementById('DragImage9'));
  makeDraggable(document.getElementById('DragImage10'));
  makeDraggable(document.getElementById('DragImage11'));
  makeDraggable(document.getElementById('DragImage12'));

addDropTarget(document.getElementById('DragImage9'), 'TrashImage1');
  addDropTarget(document.getElementById('DragImage10'), 'TrashImage1');
  addDropTarget(document.getElementById('DragImage11'), 'TrashImage1');
  addDropTarget(document.getElementById('DragImage12'), 'TrashImage1');
}
</script>
</head>
<body>

<fieldset id="Demo6" style="height: 70px"><h3>Demo - Drag any of the images</h3>
<img id="TrashImage1" src="http://www.cnlei.org/codes/javascript/js-drag-drop/images/drag_drop_trash.gif" />
<img id="DragImage9" src="http://www.cnlei.org/codes/javascript/js-drag-drop/images/drag_drop_spade.gif" />
<img id="DragImage10" src="http://www.cnlei.org/codes/javascript/js-drag-drop/images/drag_drop_heart.gif" />
<img id="DragImage11" src="http://www.cnlei.org/codes/javascript/js-drag-drop/images/drag_drop_diamond.gif" />
<img id="DragImage12" src="http://www.cnlei.org/codes/javascript/js-drag-drop/images/drag_drop_club.gif" />
</fieldset>

拖动一个HTML元素

<script content="text/javascript"> var iMouseDown = false; var dragObject = null; Number.prototype.NaN0=function(){return isNaN(this)?0:this;} // Demo 0 variables var DragDrops = []; var curTarget = null; var lastTarget = null; function ma
php获取数组元素中头一个数组元素值的实现方法

本文实例讲述了php获取数组元素中头一个数组元素值的实现方法.分享给大家供大家参考.具体如下: 在php的内置函数中,获取数组元素值的函数主要有 reset next current prev end 这几个函数. reset (PHP 3, PHP 4, PHP 5) 函数定义:mixed reset ( array &array ) 作用:该函数将 array 的内部指针倒回到第一个单元并返回第一个数组单元的值,如果数组为空则返回 FALSE,代码如下: 复制代码代码如下: $array=
一个页面元素appendchild追加到另一个页面元素的问题

一般都是自己创建元素然后append到页面的但是如果是页面本身有的元素append到另一个页面元素呢? 貌似是: 元素的确成为了另一个元素的子元素而元素本身没有了. 也就是说,消失了.而不是复制这一点,的确是这样的,但我觉的这个机制很奇怪就不能是复制么,即1成为了2的子元素,然后1仍然在那里. 不是说需求一般是这样.恰恰相反,需求的确一般都是要删除原来的,比如这个案例但是从逻辑上想想都是:先是append了,然后我们自己去删除掉原来的1元素现在倒好,append还有自带有remove功
php 删除一维数组中某一个值元素的操作方法

1. 自己写for循环从array里去掉$tmp这个元素的值 <?php $tmp = '324'; $arr = array( '0' => '321', '1' => '322', '2' => '323', '3' => '324', '4' => '325', '5' => '326', ); 代码 foreach( $arr as $k=>$v) { if($tmp == $v) unset($arr[$k]); } print_r($arr);
详解vue为什么要求组件模板只能有一个根元素

我是在知乎上看到的这个问题,转念一想,用了大半年的vue,好像真的没有了解过: '为什么只能有且只有一个根元素' 于是我花了二十多分钟去找了一下答案......竟然没有找到答案.... 好的现在我来说说我的理解,如果有不对的地方欢迎指出. 我觉得这个问题需要从两个方面来说起: 1.new Vue({el:'#app'}) 2.单文件组件中,template下的元素div 一.当我们实例化Vue的时候,填写一个el选项,来指定我们的SPA入口: let vm = new Vue({ el:'#ap
JavaScript监听一个DOM元素大小变化

1.需求场景开发过程中经常遇到的一个问题就是如何监听一个 div 的size变化. 比如我用canvas绘制了一个chart,当canvas的size发生变化的时候,需要重新绘制里面的内容,这个时候就需要监听resize事件做处理.window上虽然有resize事件监听,但这并不能满足我们的需求,因为很多时候,div的size发生了变化,实际 window.resize 事件并未触发. 对于div的resize事件的监听,实现方式有很多,比如定时器检查,通过scroll事件等等,本文主要介绍
javascript删除一个html元素节点的方法

本文实例讲述了利用原生javascript实现删除一个指定的html元素的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>我们
jQuery拖动元素并对元素进行重新排序

本文实例讲述了jQuery拖动元素并对元素进行重新排序的实现方法,分享给大家供大家参考,具体实现内容如下效果图: 具体内容如下: 从上图可以看出我们今天要实现的功能.当用户拖动一个图片时,就能改变图片的已有排序并更新表中的排列顺序.比如用户可以随意拖动我们网站中的布局,如谷歌iGoogle就已经实现了.这样便很好的提高了用户体验. 下边,我们一步一步来实现这个功能. <span id="show"> <div> <input id="check
jquery+css实现移动端元素拖动排序

本文实例为大家分享了jquery+css实现移动端元素拖动排序的具体代码,供大家参考,具体内容如下 1.近期需要实现一个选项进行拖动排序的页面,页面如下: 2.JSP页面代码: <body> <div class="main"> <div id="drag-div" class="drag-div"> <div class="others&quo
通过JS动态创建一个html DOM元素并显示

近日,因工作需要,需要通过点击某个元素后, 动态创建一个DOM元素并显示,因此写了一些相关的JS函数,在此记录,以作备忘: /**//* 动态创建DOM元素的相关函数支持 www.jcodecraeer.com */ /**//* 获取以某个元素的DOM对象 @obj 该元素的ID字符串 */ function getElement(obj) { return typeof obj=='string'?document.getElementById(obj):obj; } /**//* 获取某个

拖动一个HTML元素

相关推荐

随机推荐