原理以后有空再说现在嘛先上代码。。。。

 *{margin:;}
html,body {
width: 100%;
height: 100%;
margin:;
}
#dragBoxContainer{
width: 150px;
padding:10px;
background:#C1C4E0;
}
.dragBox{/* 拖动框 */
text-align: center;
background:#FFFFFF;
border: 1px solid #999999;
padding: 5px;
margin: 10px 0;
cursor: move;
word-break: break-word;
position: relative;
}
#dragPlaceholder{/* 占位符位 */
width: 150px;
height: 33px;
border:1px dotted red;
}
.dragHide{
/*
left: -9999px;
*/
opacity:;
height:;
padding:;
margin:;
}
 <input type="button" value="添加" id="add">
<p id="dragthis">拖动元素是:</p>
<p>
<span id="dragtarget">目标元素是:</span>
<span id="dragtarget_Height">目标中间高度:</span>
</p>
<p id="mouseHeight">鼠标高度是:</p>
<p id="Tips_placeholder">占位符位置在:</p> <div id="dragBoxContainer"></div>
     var drag_this=null;//当前拖动的元素
var drag_target=null;//悬停在那个元素
var DOMnum=0;
$("#add").click(function add(e){
DOMnum++;
$("#dragBoxContainer").append('<div class="dragBox" draggable="true" ondragstart="handleDrag(event)">00'+DOMnum+'</div>');
var cols = document.querySelectorAll('.dragBox');
[].forEach.call(cols, addDnDHandlers);
});
function handleDrag(e){
e.dataTransfer.setData("Text"," ");//兼容火狐
};
function handleDragStart(e) {//(该方法只会触发一次)拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上
e = e || window.event;
var target = e.target || e.srcElement;
console.log("拖动元素瞬间触发");
drag_this=target
console.log(drag_this);
$("#dragthis").html("拖动元素是:"+target.innerHTML);
//$(target).addClass("dragHide");
};
function handleDragEnter(e) {//当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上
e = e || window.event;
var target = e.target || e.srcElement;
console.log("进入目标元素");
drag_target=target;
//console.log(target);
$("#dragtarget").html("目标元素是:"+target.innerHTML)
//$(target).addClass("www");
};
function handleDragOver(e) {//拖拽元素正在目标元素上移动的时候触发的事件,此事件作用在目标元素上
console.log("拖拽元素正在目标元素上移动");
if (!$(drag_this).hasClass("dragHide")) {
$(drag_this).addClass("dragHide");
}
//console.log({drag_this,drag_target});
//var this_top=$(drag_this).offset().top;
var target_top=$(drag_target).offset().top;//目标顶部高度
var target_height=$(drag_target).height()*.5;//目标高
//console.log({this_top,target_top});
//console.log(target_top);
var mouseHeight=e.pageY;//鼠标Y坐标
$("#mouseHeight").html("鼠标高度是:"+mouseHeight)
var judgeTop=target_top+target_height;//目标中间高度:
console.log(target_top,target_height,judgeTop)
$("#dragtarget_Height").html("目标中间高度:"+judgeTop) if(mouseHeight<=judgeTop){//上
var dragPlaceholder=$(drag_target).prev("#dragPlaceholder");
//console.log(dragPlaceholder)
if (dragPlaceholder.length==0) {
$("#dragPlaceholder").remove();
$(drag_target).before('<div id="dragPlaceholder">我是占位符位</div>')
}
$("#Tips_placeholder").html("占位符位置在:上")
}else{//下
var dragPlaceholder=$(drag_target).next("#dragPlaceholder");
if (dragPlaceholder.length==0) {
$("#dragPlaceholder").remove();
$(drag_target).after('<div id="dragPlaceholder">我是占位符位</div>')
}
$("#Tips_placeholder").html("占位符位置在:下")
}
};
function handleDragLeave(e) {
e = e || window.event;
var target = e.target || e.srcElement;
console.log("离开目标元素");
};
function handleDrop(e) {
console.log("被拖拽的元素在目标元素上同时鼠标放开触发的事件");
};
function handleDragEnd(e) {
console.log("鼠标释放了");
e = e || window.event;
var target = e.target || e.srcElement;
//console.log(target); $("#dragPlaceholder").before(drag_this).remove();
$(drag_this).removeClass("dragHide");
};
function add(e) {
console.log("点击触发");
};
function addDnDHandlers(elem) {
//elem.addEventListener('drag', handleDrag, false);
elem.addEventListener('dragstart', handleDragStart, false);
elem.addEventListener('dragenter', handleDragEnter, false)
elem.addEventListener('dragover', handleDragOver, false);
elem.addEventListener('dragleave', handleDragLeave, false);
elem.addEventListener('drop', handleDrop, false);
elem.addEventListener('dragend', handleDragEnd, false);
elem.addEventListener('click', add, false);
};

H5拖动实现代码的更多相关文章

  1. H5拖动火狐自动打开新标签

    写在前面的话:<H5拖动火狐自动打开新标签>原因是为什么百度很多了我就不细说,本文章只说我自己的解决方法... 自定义数据里写个链接,如果火狐自动打开就跳到这个链接 这个页面就写一句话:关 ...

  2. ios9.3.3 h5的js代码全部失效

    做微信公众号页面时,ios9.3.3 h5的js代码全部失效描述: 机型iphone6 plus,ios9.3.3js代码全部失效,刚开始还以为是ios和jq兼容问题, 后来发现是es6语法不能读,导 ...

  3. C++ 无边框的拖动窗口代码

    按下鼠标时,记录下鼠标在窗体上的坐标, 同时用一个BOOL变量记录下鼠标左键按下的状态 弹起左键,则记录状态的布尔变量为FALSE. 处理鼠标移动事件,如果左键同时按下,则为鼠标拖动窗体运动,设置窗体 ...

  4. C#获取H5页面上传图片代码

    基于上一篇的H5压缩上传图片,由于图片是以二进制字符流blob的形式传过来的,所以应该想将其转成bytes类型再进行转换 public void ProcessRequest(HttpContext ...

  5. 小程序支付及H5支付前端代码小结

    小程序支付和H5支付前端都不需要引入其他的js , 只需要后台将相关的参数 ( timeStamp: '', nonceStr: '', package: '', signType: 'MD5', p ...

  6. H5拖动事件复习

    定义和用法 ondrag 事件在元素或者选取的文本被拖动时触发. 拖放是 HTML5 中非常常见的功能. 更多信息可以查看我们 HTML 教程中的 HTML5 拖放. 注意: 为了让元素可拖动,需要使 ...

  7. 拖动div简单事例代码

    事例文件下载 //拖动容器代码 var rDrag = { o: null, init: function (o) { o.onmousedown = this.start; }, start: fu ...

  8. H5页面跳转到小程序代码

    1.H5页面加代码直接打开小程序 <script type="text/javascript src="https://res.wx.qq.com/open/js/jweix ...

  9. 探讨把一个元素从它所在的div 拖动到另一个div内的实现方法

    故事背景: 接到一个新需求,要求用vue搞,主要是拖动实现布局,关键点有:单个组件拖动,一行多列里面的组件拖动,  单个组件可以拖入一行多列里, 单个组件的拖动好实现,关键是把一个组件拖动到另一个类似 ...

随机推荐

  1. 干货 | PHP就该这么学!

    前段时间和大家一起分享了一篇关于学习方法内容<大牛与搬运工的差距——学习方法的力量>.我们将学习过程分成八步,并借鉴了敏捷开发的迭代思想,以达到自我迭代学习的效果.行胜于言,理论结合实践才 ...

  2. java学习(四)

    学号 20189214 <Java程序设计>第四周学习总结 教材学习内容总结 枚举 枚举是JDK1.5版本新增的特性(泛型.For-each等如今被广泛应用的特性也是由JDK1.5时所新增 ...

  3. yarn 常用命令

    1.安装 yarn npm install yarn -g 2.卸载yarn npm uninstall yarn -g

  4. python 常忘代码查询 和autohotkey补括号脚本和一些笔记和面试常见问题

    笔试一些注意点: --,23点43 今天做的京东笔试题目: 编程题目一定要先写变量取None的情况.今天就是因为没有写这个边界条件所以程序一直不对.以后要注意!!!!!!!!!!!!!!!!!!!!! ...

  5. instanceof简单用法

    语法: 对象 instanceof 类: 含义:如果这个对象时这个类或者这个类的子类的实例化,那么结果及时ture, 否则 false. 常常用来判断一个类是否是某个类的子类,以此判断A类是否继承或者 ...

  6. python3 第二十八章 - 内置函数之List相关

    Python包含以下函数: 序号 函数 实例 1 list.append(obj)在列表末尾添加新的对象   2 list.count(obj)统计某个元素在列表中出现的次数   3 list.ext ...

  7. Core DES加、解密

    安装 Portable.BouncyCastle Nuget包 地址:https://www.nuget.org/packages/Portable.BouncyCastle/ Install-Pac ...

  8. dubbo入门学习 六 admin管理界面

    1. 本质就是一个web项目 2. 获取注册中心内Provider注册的信息.用页面呈现出来. 3. 实现步骤 3.1 把dubbo-admin-2.5.3.war上传到服务器tomcat中. 3.2 ...

  9. vue工程按业务路由打包,页面只加载对应资源

    修改路由表:src/router/index.js import Vue from 'vue'; import Router from 'vue-router'; // 主要写法如下 const Te ...

  10. boost--文件、目录操作

    filesystem库是文件系统操作库,可以使用其中的basic_path类用来操作目录.文件,使用需要包含编译好的system库和filesystem库,我们一般不直接使用basic_path,而是 ...