拖拽函数封装,元素碰撞

function drag(obj){

obj.onmousedown = function(ev){
var ev = ev || event;
//鼠标点击位置到图片两侧距离
var ol = ev.clientX - this.offsetLeft;
var ot = ev.clientY - this.offsetTop;

//非标准ie下利用全局捕获占用接下来的事件,相当于阻止浏览器默认行为
if(obj.setCapture){
obj.setCapture();
}

document.onmousemove = function(ev){
var ev = ev || event;
//移动时方块位置
var oL = ev.clientX - ol;
var oT = ev.clientY - ot;

obj.style.left = oL + ‘px‘;
obj.style.top = oT + ‘px‘;

//碰撞 九宫格排除法
var L1 = obj.offsetLeft;
var T1 = obj.offsetTop;
var R1 = obj.offsetLeft + obj.offsetWidth;
var B1 = obj.offsetTop + obj.offsetHeight;
var L2 = oDiv.offsetLeft;
var T2 = oDiv.offsetTop;
var R2 = oDiv.offsetLeft + obj.offsetWidth;
var B2 = oDiv.offsetTop + obj.offsetHeight;

if( R1<L2 || L1>R2 || B1<T2 || T1>B2 ){
oDiv.style.background = ‘‘;
}else{
oDiv.style.backgroundColor = ‘red‘;
}

}

document.onmouseup = function(){
document.onmouseup = document.onmousemove = null;
//鼠标抬起后解除全局捕获
if(obj.releaseCapture){
obj.releaseCapture();
}
}

//标准浏览器阻止文字、图片拖动默认行为
return false;
}
}

时间: 2024-07-29 21:35:16

拖拽函数封装,元素碰撞的相关文章

javascript——拖拽函数封装

CSS部分: #div1{ width: 100px; height: 100px; background: #ccc; position: absolute;} #img1{ position: absolute;} HTML部分: <div id="div1"></div> <img id="img1" src="img/1.jpg" /> JS部分: window.onload = function(){

在使用ActionChains类,在执行一次拖拽后再拖拽,还会重复拖拽上一个元素

背景: 在项目的实际使用中,要对多个元素进行拖拽到指定区域,并且这些元素还分属于不同的类型中.在拖拽完第一个元素之后,再去拖拽其它元素,会发现又会拖拽一次第一个元素. 历程: 1.网上搜索一番,没有得到答案: 2.翻阅ActionChains的源代码,发现它是将所有action存储在一个_actions的变量中.然后在perform方法中去执行这个数组中存储的所有action.代码如下: def perform(self): """ Performs all stored a

draggable与overflow同时存在,无法拖拽出父元素问题解决

在使用jquery-ui的拖拽功能对列表内的选项拖拽时,发现无法将选项拖拽出列表的范围,一出范围就自动隐藏在列表下,查找到最后的原因是css中的overflow的原因,overflow存在则不能将选项拖拽出列表,解决办法 $('ul li').draggable({ zIndex:999,//zIndex主要是让选项在上层显示出来 helper:'clone', revert:'invalid', appendTo:'body'//加上这句就可以将选项拖拽出来 }); 以上仅作总结.

关于弹出层的拖拽,封装

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } html{ height: 100%; } body{ width: 100%; height: 100%; position: relative

拖拽函数

//oDrag为容器最大宽高的标准.//handle为点击拖拉移动的地方.function drag(oDrag, handle){ handle.onmousedown = function(event){ var event = event||window.event; var maxW = document.documentElement.clientWidth - oDrag.offsetWidth; var maxH = document.documentElement.clientH

js拖拽的封装

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #div1 {width: 100px; height: 100px; background: red; position: abs

拖拽系列二、利用JS面向对象OOP思想实现拖拽封装

接着上一篇拖拽系列一.JavaScript实现简单的拖拽效果这一篇博客将接着对上一节实现代码利用JS面向对象(OOP)思维对上一节代码进行封装; 使其模块化.避免全局函数污染.方便后期维护和调用:写到这里突然想起一句话“没有任何一个题目是彻底完成的.总还会有很多事情可做......” 我想这句话程序开发大概也适用吧,前端开发人员总是可以结合自己之前学到“拖拽”相关知识,不断扩展.完善.无穷无尽.......     利用匿名函数自执行实现封装 ;(function(){ //do somethi

Selenium - 实现网页元素拖拽

Drag and Drop, 使用鼠标实现元素拖拽的操作貌似很复杂, 在Selenium中, 借助OpenQA.Selenium.Interactions.Actions类库中提供的方法, 实现起来还是比较简单的.道理如下: 1. 找到要拖拽的页面元素-源(source). 2. 找到要释放的页面元素-目标(target), 页面显示的这个元素可能是个坑, 但是在页面代码中他就是一个元素. 3. 借助(new Actions(IWebDriver)).DragAnddrop( source, t

javascript动画系列第四篇——拖拽改变元素大小

× 目录 [1]原理简介 [2]范围圈定 [3]大小改变[4]代码优化 前面的话 拖拽可以让元素移动,也可以改变元素大小.本文将详细介绍拖拽改变元素大小的效果实现 原理简介 拖拽让元素移动,是改变定位元素的left和top值实现的.而拖拽改变元素大小,则还需要改变元素的宽高 范围圈定 我们把改变元素大小的范围圈定在距离相应边10px的范围内 左侧边界L = obj.offsetLeft + 10 右侧边界R = obj.offsetLeft + obj.offsetWidth - 10 上侧边界