html5元素拖曳的小小实践_html drop-container-优快云博客

本文链接：https://blog.youkuaiyun.com/cdnight/article/details/50441403

本文探讨了HTML中拖拽元素在不同显示属性下存在的定位问题，并提供了一个使用jQuery实现的简单示例来演示如何创建可拖拽元素及处理拖拽事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意点

请尝试下面两个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>