直接上代码吧!
<!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=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload = function(){
var container = document.getElementById('container');
var ele = document.getElementById('d1');
var bodyWidth = container.offsetWidth,
bodyHeight = container.offsetHeight;
var maxX = bodyWidth - ele.offsetWidth - 10;
var maxY = bodyHeight - ele.offsetHeight - 10;
var dd = new Dragdrop({
target : ele,
area : [0,maxX,0,maxY],
callback : function(obj){
if(typeof obj.moveX == 'number' && this.dragX){
document.getElementById('x').innerHTML = 'x:'+obj.moveX;
}
if(typeof obj.moveY == 'number' && this.dragY){
document.getElementById('y').innerHTML = 'y:'+obj.moveY;
}
}
});
document.getElementById('setting').onclick = function(e){
e = e || event;
var target = e.target || e.srcElement;
if(target.value == '1' && target.checked){
dd.dragAll();
}
if(target.value == '2' && target.checked){
dd.dragX();
}
if(target.value == '3' && target.checked){
dd.dragY();
}
if(target.value == '4' && target.checked){
dd.setDragable(false);
}
if(target.value == '5' && target.checked){
dd.setDragable(true);
}
if(target.value == '6' && target.checked){
dd.reStore();
document.getElementById('x').innerHTML = 'x:0';
document.getElementById('y').innerHTML = 'y:0';
}
}
}
</script>
</head>
<body>
<div style="width:520px;height:20px;margin:10px auto;">
拖拽状态:<span id="x">x:0</span>, <span id="y">y:0</span>
</div>
<div id="container" style="position:relative;border:5px solid gray;width:520px;height:300px;margin:0 auto;">
<div id="d1" style="width:100px;height:50px;background:gold;text-align:center;position:absolute;left:0px;top:0px;">
Drag me.
</div>
</div>
<div id="setting" style="width:520px;margin:20px auto;">
<input id="f1" type="radio" value="1" name="flag"/><label for="f1">任意方向</label>
<input id="f2" type="radio" value="2" name="flag"/><label for="f2">水平方向</label>
<input id="f3" type="radio" value="3" name="flag"/><label for="f3">垂直方向</label>
<input id="f4" type="radio" value="4" name="flag"/><label for="f4">停止拖拽</label>
<input id="f5" type="radio" value="5" name="flag"/><label for="f5">开启拖拽</label>
<input id="f6" type="radio" value="6" name="flag"/><label for="f6">恢复初始状态</label>
</div>
<script type="text/javascript">
/**
*
* 基本拖拽
* new Dragdrop({
* target 拖拽元素 HTMLElemnt 必选
* bridge 指定鼠标按下哪个元素时开始拖拽,实现模态对话框时用到
* dragable 是否可拖拽 (true)默认
* dragX true/false false水平方向不可拖拽 (true)默认
* dragY true/false false垂直方向不可拖拽 (true)默认
* area [minX,maxX,minY,maxY] 指定拖拽范围 默认任意拖动
* callback 移动过程中的回调函数
* });
*
* demo
* dragdrop_0.6.html
*/
Dragdrop = function(window){
var doc = window.document;
var E = {
on : function(el, type, fn){
el.addEventListener ?
el.addEventListener(type, fn, false) :
el.attachEvent ?
el.attachEvent("on" + type, fn) :
el['on'+type] = fn;
},
un : function(el,type,fn){
el.removeEventListener ?
el.removeEventListener(type, fn, false) :
el.detachEvent ?
el.detachEvent("on" + type, fn) :
el['on'+type] = null;
},
evt : function(e){
return e || window.event;
}
};
return function(opt){
var conf = null, defaultConf, diffX, diffY;
function Config(opt){
this.target = opt.target;
this.bridge = opt.bridge;
this.dragable = opt.dragable != false;
this.dragX = opt.dragX != false;
this.dragY = opt.dragY != false;
this.area = opt.area;
this.callback = opt.callback;
}
function Dragdrop(opt){
if(!opt){return;}
conf = new Config(opt);
defaultConf = new Config(opt);
conf.bridge ?
E.on(conf.bridge,'mousedown',mousedown) :
E.on(conf.target,'mousedown',mousedown);
}
Dragdrop.prototype = {
dragX : function(){
conf.dragX = true;
conf.dragY = false;
},
dragY : function(b){
conf.dragY = true;
conf.dragX = false;
},
dragAll : function(){
conf.dragX = true;
conf.dragY = true;
},
setArea : function(a){
conf.area = a;
},
setBridge : function(b){
conf.bridge = b;
},
setDragable : function(b){
conf.dragable = b;
},
reStore : function(){
conf = new Config(defaultConf);
conf.target.style.top = '0px';
conf.target.style.left = '0px';
},
getDragX : function(){
return conf.dragX;
},
getDragY : function(){
return conf.dragY;
}
}
function mousedown(e){
e = E.evt(e);
var el = conf.target;
el.style.position = 'absolute';
el.style.cursor = 'move';
if(el.setCapture){ //IE
E.on(el, "losecapture", mouseup);
el.setCapture();
e.cancelBubble = true;
}else if(window.captureEvents){ //标准DOM
e.stopPropagation();
E.on(window, "blur", mouseup);
e.preventDefault();
}
diffX = e.clientX - el.offsetLeft;
diffY = e.clientY - el.offsetTop;
E.on(doc,'mousemove',mousemove);
E.on(doc,'mouseup',mouseup);
}
function mousemove(e){
var el = conf.target, e = E.evt(e), moveX = e.clientX - diffX, moveY = e.clientY - diffY;
var minX, maxX, minY, maxY;
if(conf.area){
minX = conf.area[0];
maxX = conf.area[1];
minY = conf.area[2];
maxY = conf.area[3];
moveX < minX && (moveX = minX); // left 最小值
moveX > maxX && (moveX = maxX); // left 最大值
moveY < minY && (moveY = minY); // top 最小值
moveY > maxY && (moveY = maxY); // top 最大值
}
if(conf.dragable){
conf.dragX && (el.style.left = moveX + 'px');
conf.dragY && (el.style.top = moveY + 'px');
if(conf.callback){
var obj = {moveX:moveX,moveY:moveY};
conf.callback.call(conf,obj);
}
}
}
function mouseup(e){
var el = conf.target;
el.style.cursor = 'default';
E.un(doc,'mousemove',mousemove);
E.un(doc,'mouseup',mouseup);
if(el.releaseCapture){ //IE
E.un(el, "losecapture", mouseup);
el.releaseCapture();
}
if(window.releaseEvents){ //标准DOM
E.un(window, "blur", mouseup);
}
}
return new Dragdrop(opt);
}
}(this);
</script>
</body>
</html>
分享到:
相关推荐
vue-drag-tree-org内容列表安装# use npmnpm install vue-drag-tree-org# use yarnyarn add vue-drag-tree-org使用# useimport VueDragTreeOrg from 'vue-drag-tree-org'Vue.use(VueDragTreeOrg)# or usecomponents:...
Vue拖动调整大小 Vue可拖动和可调整大小元素的组件。 目录 演示版 产品特点 轻巧,无依赖 ...import VueDragResize from 'vue-drag-resize' Vue . component ( 'vue-drag-resize' , VueDragResize ) 使
但是,作为开发人员,您可能会知道,将其与JavaScript一起使用具有很大的挑战性。 在这种情况下,Vue.js也无济于事。 因此,为了简化起见,编写了v-drag。 其目的是使用Vue.js快速集成和自定义项目中的可拖动元素。...
描述(Describe) 基于 vue2.6 的一个 dom 元素拖拽、缩放和旋转的组件; 支持基本的触点控制、宽高位置范围值、子父级嵌套、锁定定比例和层级等;...import vueDragResizeRotate from '@liaogn/vue-drag-re
npm install --save-dev @4tw/cypress-drag-drop 或纱线 yarn add --dev @4tw/cypress-drag-drop 在加载 Cypress 之前(通常在您的commands.js )放置以下行: require ( '@4tw/cypress-drag-drop' ) 或者,...
react-drag-listview React拖动列表组件。安装例子拖曳行拖动列 发展npm installnpm start 用法const ReactDragListView = require ( 'react-drag-listview' ) ;class Demo extends React . Component { constructor...
0301drag-sort-table_javascript_veeqi
$ npm i react-native-drag-resize --save 基本用法 安装react-native-drag-resize软件包以进行项目 导入模块到文件 import { DragResizeBlock , } from 'react-native-drag-resize' ; 然后,使用如下组件: ...
轻型拖动以滚动角度的旋转木马 维护者想要 滚动拖动! 尝试! 安装 您可以在npm上获得它。 npm install ngx-drag-scroll --save ...这个项目需要Angular 5+作为依赖。...您需要将...drag-scroll style="wid
安装下载仓库,包括: [removed][removed]通过凉亭: $ bower install angular-drag-resize通过npm: $ npm install angular-drag-resize通过纱: $ yarn add angular-drag-resize用法将angular.drag.resize注入您的...
dtree, dhtmlxtree(1.5普通版及1.3专业版), drag-drop-tree
$ npm install react-native-drag-text-editor --save 用法 import React , { Component } from "react" ; import { Dimensions } from "react-native" ; import { DragTextEditor } from 'react-native-drag-text-...
注意:v-drag-drop的2.x及更高版本仅与Vue 3兼容。 如果使用Vue 2,请安装1.x版。 旨在封装本机拖放API的某些特性,并使其更易于与Vue.js一起使用。 还添加了一些方便的功能,例如名称空间。 目录 安装 安装v-drag-...
react-native-drag-to-sort-tags react-native-drag-to-sort-tags 是一个可拖动排序的标签组件(iOS & Android),并且在安卓上做了性能优化,滑动的流畅度表现良好。 功能 拖动标签排序 在安卓上更好的性能表现,更...
aframe-click-drag-component A 单击和拖动组件。 带有click-drag组件的实体可以在3D场景中单击并拖动。 甚至在相机移动或旋转时也能正常工作! 大事记 拖动开始 发出以下信息: offset: {x, y, z} -从实体中心到...
rc-dragrc-drag is a react-based drag-and-zoom component library that provides a flexible drag configuration and allows us to scale from different angles. :red_heart: Mobile drag and drop is supported....
wx-drag-sort 微信小程序拖拽排序
Vue拖动树 它是一个树组件(Vue2.x),允许您拖放...预习入门指南安装npm install vue-drag-tree --S 要么yarn add vue-drag-tree -S 用法下面的代码来自PS如果您收到有关Vue packages version mismatch错误// Update
DraftJS拖放文件上传插件 这是draft-js-plugins-editor 。... import createDndFileUploadPlugin from 'draft-js-drag-n-drop-upload-plugin' ; const dndFileUploadPlugin = createDndFileUploadPlugin ( ) ;
lp-react-tree-drag 树形拖拽排序 树形拖拽排序组件。 安装 npm i -S lp-react-tree-drag 使用 属性 类型 默认值 备注 expandedAll Boolean false 默认是否展开节点 showLine Boolean false 是否显示组连线 Data ...