easyUI拖放-基本的拖动和放置

最新推荐文章于 2025-05-25 13:54:12 发布

小太阳哇

最新推荐文章于 2025-05-25 13:54:12 发布

阅读量647

点赞数

CC 4.0 BY-SA版权

分类专栏： easyUI学习

本文链接：https://blog.youkuaiyun.com/qq_39492374/article/details/86478892

easyUI学习专栏收录该内容

17 篇文章

订阅专栏

该博客介绍了如何使用easyUI实现基本的拖放功能。通过示例代码展示了三种拖放方式：默认拖动、通过克隆元素的拖动以及自定义代理的拖动。

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

首先，我们创建三个 <div> 元素：

    <div id="dd1" class="dd-demo"></div>
    <div id="dd2" class="dd-demo"></div>
    <div id="dd3" class="dd-demo"></div>

对于第一个 <div> 元素，我们通过默认值让其可以拖动。

$('#dd1').draggable();

对于第二个 <div> 元素，我们通过创建一个克隆（clone）了原来元素的代理（proxy）让其可以拖动。

$('#dd2').draggable({
    proxy:'clone'
});

对于第三个 <div> 元素，我们通过创建自定义代理（proxy）让其可以拖动。

$('#dd3').draggable({
    proxy:function(source){
        var p = $('<div class="proxy">proxy</div>');
        p.appendTo('body');
        return p;
    }
});

完整代码：

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>easyUI拖放</title>
    <!-- jquery核心库 -->
    <script type="text/javascript" src="../easyui/jquery.min.js"></script> 
    <!-- easyui核心库 --> 
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <!-- easyui核心UI文件 css -->  
    <link href="../easyui/themes/default/easyui.css" rel="stylesheet" type="text/css"/>
    <!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
     <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script>
    <!-- easyui图标 -->
    <link href="../easyui/themes/icon.css" rel="stylesheet" type="text/css"/>
    
    <style type="text/css">
      .dd-demo{
        width:160px;
        height:160px;
        border:2px solid #d3d3d3;
        position:absolute;
      }
      .proxy{
        border:1px dotted #333;
        width:60px;
        height:60px;
        text-align:center;
        background:#fafafa;
      }
      #dd1{
        background:#E0ECFF;
        left:20px;
        top:20px;
      }
      #dd2{
        background:#8DB2E3;
        left:200px;
        top:20px;
      }
      #dd3{
        background:#FBEC88;
        left:380px;
        top:20px;
      }
  </style>
  </head>
  
  <body>
     <div id="dd1" class="dd-demo">
      第一个div，通过默认值让其可以拖动</div>
     <div id="dd2" class="dd-demo">
      第二个div，通过创建一个克隆（clone）了原来元素的代理（proxy）让其可以拖动。</div>
     <div id="dd3" class="dd-demo">
      第三个div，通过创建自定义代理（proxy）让其可以拖动。</div>
  </body>

  <script type="text/javascript">
   //第一个div
   $('#dd1').draggable();
   //第二个div
   $('#dd2').draggable({
     proxy:'clone'
   });
   //第三个div
   $('#dd3').draggable({
    proxy:function(source){
      var p=$('<div class="proxy">proxy</div>');
      p.appendTo('body');
      return p;
    }
   });
  </script>
</html>