html5元素拖曳的小小实践

来源：互联网发布：昆山远洋数据好不好编辑：程序博客网时间：2024/04/29 12:47

注意点

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

<%--  Created by IntelliJ IDEA.  User: Administrator  Date: 2015/12/31  Time: 13:50  To 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: Administrator  Date: 2015/12/31  Time: 13:50  To 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: Administrator  Date: 2015/12/31  Time: 13:50  To 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>

效果：
这里写图片描述

这里写图片描述

0 0