html5元素拖曳的小小实践

注意点

请尝试下面两个html代码，你会发现一点点问题–当然，我只在google chrome下面试过：

<%--Created by IntelliJ IDEA.User: AdministratorDate: 2015/12/31Time: 13:50To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title></title><script src="/static/lib/jquery-1.11.0.min.js"></script><script src="/static/lib/jquery-migrate-1.2.1.js"></script>
</head>
<style>.drag-item{border:1px solid green;padding:10px;line-height: 24px;cursor: pointer;/*display: block;*//*float: left;*//*width:100px;*//*height: 25px;*/}
</style>
<body><div>
<span ui="drag-item" class="drag-item" draggable="true">可以拖曳的元素1</span><span ui="drag-item" class="drag-item" draggable="true">可以拖曳的元素2</span><span ui="drag-item" class="drag-item" draggable="true">可以拖曳的元素3</span><span ui="drag-item" class="drag-item" draggable="true">可以拖曳的元素4</span><span ui="drag-item" class="drag-item" draggable="true">可以拖曳的元素5</span>
</div><script>$('.drag-item').each(function(){var _dom=$(this)[0];_dom.ondragstart = function (event){console.log("dragStart");var _current_el=event.target;console.log($(_current_el).text());//event.dataTransfer.setData("Text", event.target.id);};});
</script>
</body>
</html>

和：

<%--Created by IntelliJ IDEA.User: AdministratorDate: 2015/12/31Time: 13:50To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title></title><script src="/static/lib/jquery-1.11.0.min.js"></script><script src="/static/lib/jquery-migrate-1.2.1.js"></script>
</head>
<style>.drag-item{border:1px solid green;padding:10px;line-height: 24px;cursor: pointer;display: block;float: left;width:100px;height: 25px;}
</style>
<body><div>
<span ui="drag-item" class="drag-item" draggable="true">可以拖曳的元素1</span><span ui="drag-item" class="drag-item" draggable="true">可以拖曳的元素2</span><span ui="drag-item" class="drag-item" draggable="true">可以拖曳的元素3</span><span ui="drag-item" class="drag-item" draggable="true">可以拖曳的元素4</span><span ui="drag-item" class="drag-item" draggable="true">可以拖曳的元素5</span>
</div><script>$('.drag-item').each(function(){var _dom=$(this)[0];_dom.ondragstart = function (event){console.log("dragStart");var _current_el=event.target;console.log($(_current_el).text());//event.dataTransfer.setData("Text", event.target.id);};});
</script>
</body>
</html>

假如运行过的话，会发现：
情况1：

情况2：

就是定位问题。拖曳时候假如是inline 元素，chrome的定位会错误。这个需要验证一下。

一个简单的拖曳demo

下面这个demo是比较简单的，当然，也是非常适用于一些拖曳场合的。

<%--Created by IntelliJ IDEA.User: AdministratorDate: 2015/12/31Time: 13:50To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title></title><script src="/static/lib/jquery-1.11.0.min.js"></script><script src="/static/lib/jquery-migrate-1.2.1.js"></script>
</head>
<style>.drag-item{border:1px solid green;padding:10px;line-height: 24px;cursor: pointer;display: block;float: left;width:100px;height: 25px;}.drop-container{min-height: 100px;border:1px #d3d3d3 solid;}
</style>
<body><div>
<span ui="drag-item" class="drag-item" draggable="true" recordId="0">可以拖曳的元素1</span><span ui="drag-item" class="drag-item" draggable="true" recordId="1">可以拖曳的元素2</span><span ui="drag-item" class="drag-item" draggable="true" recordId="2">可以拖曳的元素3</span><span ui="drag-item" class="drag-item" draggable="true" recordId="3">可以拖曳的元素4</span><span ui="drag-item" class="drag-item" draggable="true" recordId="4">可以拖曳的元素5</span>
</div>
<div style="height: 150px;"></div>
<div id="container-1" class="drop-container"></div>
<div style="height: 20px;"></div>
<div id="container-2" class="drop-container"></div><script>$('.drag-item').each(function(){var _dom=$(this)[0];_dom.ondragstart = function (event){console.log("dragStart");var _current_el=event.target;console.log($(_current_el).text());//event.dataTransfer.setData("Text", event.target.id);event.dataTransfer.setData("recordId",$(_current_el).attr("recordId"));};});$('.drop-container').each(function(){var _now_dom=$(this)[0];/*** 当放置被拖数据时，会发生 drop 事件。* 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）* @param event*/_now_dom.ondrop = function (event){/*   for (var p in event.dataTransfer) { console.log(p + " = " + event.dataTransfer[p] + " @@"); } */console.log("onDrop");//var id = event.dataTransfer.getData("Text");var _recordId = event.dataTransfer.getData("recordId");//$(event.target).append($(_el));var _drag_el=$('.drag-item[recordId="'+_recordId+'"]');$(event.target).append(_drag_el);//$(this).append($("#" + id).clone().text($(this).find("div").length));event.preventDefault();};/*** ondragover 事件规定在何处放置被拖动的数据。*默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。*/_now_dom.ondragover = function (event){console.log("onDrop over");event.preventDefault();}_now_dom.ondragenter = function (event){console.log("onDrop enter");}_now_dom.ondragleave = function (event){console.log("onDrop leave");}_now_dom.ondragend = function (event){console.log("onDrop end");}});
</script>
</body>
</html>

效果：

html5元素拖曳的小小实践相关推荐

Html5元素及基本语法
Html5元素及基本语法 HTML标签开始标签(opening tag):开放标签结束标签(closing tag):闭合标签元素定义:HTML元素指的是从开始标签到结束标签的代码(元素以开始 ...
html5元素拖动（转载黑桐）
HTML5 元素拖动 1.拖动元素img的相关设置: 设置元素可以拖动属性 draggable="true" 设置元素被拖动时触发的事件 οndragstart="dra ...
html5.js让IE（包括IE6）支持HTML5元素方法
html5.js让IE(包括IE6)支持HTML5元素方法微软的最新浏览器IE8及以下IE版本对HTML5标签的支持是有限的,我们可以通过在网页中添加脚本的方式来解决目前IE浏览器对HTML5支持的 ...
介绍语义HTML5元素（感觉这个html5是一个不错的方向！）
HTML5已经引入了很多新的元素使HTML标记甚至更多的语义. 为了得到一个更好的理解这些元素应该被使用,我已经决定使用相同的例子在这部分的教程.这是一篇关于面粉,我有AllReceipes借用. 在 ...
html5语义化标记元素_语义HTML5元素介绍
html5语义化标记元素 Semantic HTML elements are those that clearly describe their meaning in a human- and ma ...
在 IE 中使用 HTML5 元素
一个HTML5范本 <html> <head> <style>blah { color: red; }</style> </head> &l ...
分享一个在线的HTML5元素在线测验 : HTML5 Element Quiz
日期:2011/12/07 来源:GBin1.com 今天在公司的网站上发现的一个在线HTML5元素的在线测试,大家有兴趣可以挑战一下,有点小BT.Enjoy! 在线测验转载于:https://w ...
那些是html5新增元素类型,HTML5 元素分类
HTML5 元素分类发布时间:2020-03-02 02:39:31 来源:51CTO 阅读:547 作者:双士之心 HTML5元素分类:结构性元素.级块性元素.行内语义性元素.交互性元素. 目的: ...
内嵌html5,显示：内嵌HTML5元素
我正在寻找一个水平铺设的网站,但我遇到了显示问题:内嵌规则.显示:内嵌HTML5元素它似乎是针对内联导航无序列表量身定制的,它完全覆盖了CSS中文章(和/或部分)的高度和宽度设置. 下面是HTML: ...

html5元素拖曳的小小实践

注意点

一个简单的拖曳demo

html5元素拖曳的小小实践相关推荐

最新文章

热门文章