JQuery EasyUI(4)_drooppable-优快云博客

第四章：Droppable（放置）组件

学习要点：

加载方式
属性列表
事件列表
方法列表

一、加载方式：

1.class加载方式

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>
      <div id="dd" class="easyui-droppable" data-options="accept:'#box,#pox'" style="width:600px;height:400px;background:black"></div>
      <div id="box"  style="width:100px;height:100px;background:#ccc;">
          <span id="pox">内容部分</span>
      </div> 
  </body>
</html>

2.JS调用

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>
      <div id="dd" style="width:600px;height:400px;background:black"></div>
      <div id="box"  style="width:100px;height:100px;background:#ccc;">
         <span id="pox">内容部分</span>
      </div>
  </body>
</html>

$(function(){
      $('#box').droppable({
        accept:'#box,#pox',
  });
});

二、属性列表：

Drooppable属性
属性名	值	说明
accept	selector	默认为null，确定哪些元素被接受
disabled	boolean	默认为false，如果为true，则禁止放置

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>
      <div id="dd" style="width:600px;height:400px;background:black"></div>
      <div id="box"  style="width:100px;height:100px;background:#ccc;">
         <span id="pox">内容部分</span>
      </div>
  </body>
</html>

$(function(){
      $('#dd').droppable({
        accept:'#box,#pox',
        //disabled:true,
  });
     
  $('#box').draggable({
 
  });
});

三、事件列表

Droppable事件
事件名	传参	说明
onDragEnter	e,source	在被拖拽元素到放置区内的时候触发
onDragOver	e,source	在被拖拽元素经过放置区的时候触发
onDragLeave	e,source	在被拖拽元素离开放置区的时候触发
onDrop	e,source	在被拖拽元素放入到放置区的时候触发

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>
      <div id="dd" style="width:600px;height:400px;background:black"></div>
      <div id="box"  style="width:100px;height:100px;background:#ccc;">
          <span id="pox">内容部分</span>
      </div>
  </body>
</html>

$(function(){
      $('#dd').droppable({
        accept:'#box',
        onDragEnter:function(e,source){
          console.log(source),
    }
  });
     
  $('#box').draggable({
 
  });
});

$(function(){
      $('#dd').droppable({
        accept:'#box',
        //disabled:true,

        onDragEnter:function(e,source){
          //console.log(source),
          $(this).css('background','blue');
          alert('enter');
       },

        onDragOver:function(e,source){
          //console.log(source),
          $(this).css('background','orange');
          alert('over');
       },     

        onDragLeave:function(e,source){
          //console.log(source),
          $(this).css('background','green');
          alert('leave');
       },

        onDrop:function(e,source){
          //console.log(source),
          $(this).css('background','maroon');
          alert('drop');
       },
      //onDragEnter只触发一次，而Over会在不停的拖动中不停触发。
      //onDrop是放入到放置区，松开鼠标左键，丢下的操作。
  });
     
  $('#box').draggable({
 
  });
});

四、方法列表

Droppable方法
事件名	传参	说明
options	none	返回属性对象
enable	none	启用放置功能
disable	none	禁止放置功能

PS：我们可以使用$.fn.droppable.defaults 重写默认值对象。

$(function(){

      $.fn.droppable.defaults.disabled = true;       

      $('#dd').droppable({
        accept:'#box',
        disabled:false,

        onDragEnter:function(e,source){
          //console.log(source),
          $(this).css('background','blue');
          alert('enter');
       },

        onDragOver:function(e,source){
          //console.log(source),
          $(this).css('background','orange');
          alert('over');
       },

        onDragLeave:function(e,source){
          //console.log(source),
          $(this).css('background','green');
          alert('leave');
       },

        onDrop:function(e,source){
          //console.log(source),
          $(this).css('background','maroon');
          alert('drop');
       },

      //onDragEnter只触发一次，而Over会在不停的拖动中不停触发。
      //onDrop是放入到放置区，松开鼠标左键，丢下的操作。

  });
     
     console.log($('#dd').droppable('options'));
     $('#dd').droppable('disable');
     $('#dd').droppable('enable');

  $('#box').draggable({
 
  });
});

作者：Roger_CoderLife

链接：https://blog.youkuaiyun.com/Roger_CoderLife/article/details/102570239

本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载！