页面自定义拖拽布局

body {margin:0px;padding:0px;font-size:12px;text-align:center;}
body > div {text-align:center; margin-right:auto; margin-left:auto;}
.content{width:900px;}
.content .left{
float:left;
width:20%;
border:1px solid #FF0000;
margin:3px;
}
.content .center{float:left;border:1px solid #FF0000;margin:3px;width:57%}
.content .right{float:right;width:20%;border:1px solid #FF0000;margin:3px}
.mo{height:auto;border:1px solid #CCC;margin:3px;background:#FFF}
.mo h1{background:#ECF9FF;height:18px;padding:3px;cursor:move}
.mo .nr{height:80px;border:1px solid #F3F3F3;margin:2px}
h1{margin:0px;padding:0px;text-align:left;font-size:12px}

var dragobj={}
window.onerror=function(){return false}
function on_ini(){
String.prototype.inc=function(s){return this.indexOf(s)>-1?true:false}
var agent=navigator.userAgent
window.isOpr=agent.inc("Opera")
window.isIE=agent.inc("IE")&&!isOpr
window.isMoz=agent.inc("Mozilla")&&!isOpr&&!isIE
if(isMoz){
Event.prototype.__defineGetter__("x",function(){return this.clientX+2})
Event.prototype.__defineGetter__("y",function(){return this.clientY+2})
}
basic_ini()
}
function basic_ini(){
window.$=function(obj){return typeof(obj)=="string"?document.getElementById(obj):obj}
window.oDel=function(obj){if($(obj)!=null){$(obj).parentNode.removeChild($(obj))}}
}
window.onload=function(){
on_ini()
var o=document.getElementsByTagName("h1")
for(var i=0;ia[1]&&e.xa[0]&&e.y(op[1]+10)&&e.x

dom0

dom1

dom2

dom3

dom4

dom5

dom6

dom7

dom8

dom9

dom10

dom11

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • 页面自定义拖拽布局

    body {margin:0px;padding:0px;font-size:12px;text-align:center;} body > div {text-align:center; margin-right:auto; margin-left:auto;} .content{width:900px;} .content .left{ float:left; width:20%; border:1px solid #FF0000; margin:3px; } .content .cente

  • 解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题

    功能描述: 如图,右侧悬浮菜单按钮,只支持上下方向拖动,点击时展开或关闭菜单. BUG说明: 鼠标上下方向拖拽,如果松开时鼠标位于悬浮按钮上会默认执行click事件,经验证,click事件与mouse事件的执行顺序为onmousedown =>onmouseup =>onclick,意味着在click事件执行时会与与其相关的mouse事件冲突. 解决方案: 因为click事件执行时间短,所以利用鼠标拖动的时间差作为标志,在拖拽事件中计算鼠标从onmousedown 到onmouseup 所用的

  • Vue3.0利用vue-grid-layout插件实现拖拽布局

    目录 1.插件 2.插曲 3.实现 4.校验函数 1.插件 首先,我们选择的插件是vue-grid-layout npm i vue-grid-layout --save 官网:https://jbaysolutions.github.... 2.插曲 安装完依赖,发现项目能启动起来,按照官网demo发现页面空白,控制台提示没有找到子组件 改变思路,不使用局部引入组件,使用全局引入组件. 3.实现 const layout = ref<LayoutItem[]>([ { x: 0, y: 0,

  • 前端页面文件拖拽上传模块js代码示例

    最近给卫生局做一个表格上传/可视化系统,算是小有成果.今天把项目中的文件拖拽上传模块分离出来,做了一个独立的小demo,并把相关代码打包上传到了我的github中,为了其他学习者和开发者提供拙见. gitHub地址:https://github.com/codeplay2015/dragToUpload 由于代码中我的注释很详尽,所以具体逻辑实现及不介绍了,大家直接看代码及能明白.现在简单列一个功能清单和一些用到的知识点清单: 模态框 文件的批量上传 使用formData API 封装数据 并通

  • react实现自定义拖拽hook

    前沿 最近发现公司的产品好几个模块用到了拖拽功能,之前拖拽组件是通过Html5 drag Api 实现的但体验并不是很好,顺便将原来的拖拽组建稍做修改,写一个自定义hook,方便大家使用拖拽功能. 正文 拖拽功能原理: 1.拖拽元素通过addEventListener监听器添加鼠标按下,鼠标移动,以及鼠标抬起事件.2.再通过getBoundingClientRect() 得到拖拽元素四周相对于可拖拽区域边界的距离.3.鼠标移动时计算x轴和y轴的移动偏移量.4.通过element.style.tr

  • Vue使用自定义指令实现拖拽行为实例分析

    本文实例讲述了Vue使用自定义指令实现拖拽行为.分享给大家供大家参考,具体如下: 需求 通过自定义指令的方式实现拖拽效果,预期的使用方式为: <div style="background: #f00; width: 200px; height: 200px;" v-drag> XXXX </div> 更重要的一个需求点: 拖拽元素内部的子元素可以自行阻止拖拽行为 比如: <div style="background: #f00; width: 2

  • vue实现页面div盒子拖拽排序功能

    vue 实现页面div盒子拖拽排序功能前言:目前市面上有很多实现拖拽排序功能的插件和方法,本节不过多累述,只讲一种:css3的transition-group方法 效果图: 1. DOM中使用: <transition-group class="container" name="sort"> <div class="app-item" v-for="app in customApps" :key="

  • C#自定义鼠标拖拽Drag&Drop效果之基本原理及基本实现代码

    目录 一.前言 二.基本原理 1,设计界面 2,拖拽发起方 3,拖拽接收方 4,实际演示 三.自定义拖拽时鼠标效果 1,界面设计 2,拖拽发起方 3,拖拽接收方 4,GiveFeedback实现鼠标样式切换 4,实际演示 四.源码下载 五.总结 一.前言 拖拽(Drag&Drop),属于是极其常用的基础功能.无论是在系统上.应用上.还是在网页上,拖拽随处可见.同时拖拽时的鼠标效果也很漂亮,像这样: 这样: 还有这样: 等等等等.这些拖拽时的鼠标效果,直观又美观.然后,在我们写程序时,程序确实是支

  • vue3使用自定义指令实现el dialog拖拽功能示例详解

    目录 实现el-dialog的拖拽功能 通过自定义指令实现拖拽功能 实现拖拽功能 使用方式 实现el-dialog的拖拽功能 这里指的是 element-plus 的el-dialog组件,一开始该组件并没有实现拖拽的功能,当然现在可以通过设置属性的方式实现拖拽. 自带的拖拽功能非常严谨,拖拽时判断是否拖拽出窗口,如果出去了会阻止拖拽. 如果自带的拖拽功能可以满足需求的话,可以跳过本文. 通过自定义指令实现拖拽功能 因为要自己操作dom(设置事件),所以感觉还是使用自定义指令更直接一些,而且对原

  • jquery ui sortable拖拽后保存位置

    jqueryUI sortable 可以用来进行页面拖拽布局,然而有一个小问题就是拖拽后如何保存状态. 工作中遇到了这个情况,遍把这个问题记了下来,具体思路是: 利用拖拽stop后利用 var arr = $( ".sortable" ).sortable('toArray'); 记录拖拽后的id数组顺序,然后把这个数组存起来,可以存cookie,数据库,localstorage等,刷新页面后读取这个数组,然后进行重新排序. 具体的代码如下可直接复制运行.本文将数组保存在localst

随机推荐