jQuery EasyUI 拖放 – 基本的拖动和放置-白红宇

jQuery EasyUI 拖放 – 基本的拖动和放置

阅读量：4520 次

发布时间：2019-06-08

本文共 2678 字，大约阅读时间需要 8 分钟。

jQuery EasyUI 拖放 -

基本的拖动和放置在jQuery EasyUI中，可以实现HTML元素的基本拖动和放置。

.dd-demo{
       width:40px;    height:40px;    background-color:pink;    margin:20px;}

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

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

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

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

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

$('#dd3').draggable({
           proxy:function(source){            var p = $('
     
      proxy
     
');            p.appendTo('body');            return p;        }    });

revert:true(拖拽后会还原）

$('#d1').draggable({    revert:true,    proxy:'clone'});

制作课表：


         
             
      
                                                    
          
           English
                              
                                             
          
           Science
                              
                                             
          
           Math
                              
                                   
      
    
     
        
         
             
      
                                                                             Monday                          Tuesday                          Wednesday                          Thursday                          Friday                     
                                             08:00                                                                                                                                                  
                                             09:00                                                                                                                                                  
                                             10:00

//拖动在左侧的学校科目$('.left .item').draggable({        revert:true,        proxy:'clone'    });//放置学校科目在时间表单元格上$('.right td.drop').droppable({    onDragEnter:function(){        $(this).addClass('over');    },    onDragLeave:function(){        $(this).removeClass('over');    },    onDrop:function(e,source){        $(this).removeClass('over');        if ($(source).hasClass('assigned')){            $(this).append(source);        } else {            var c = $(source).clone().addClass('assigned');            $(this).empty().append(c);            c.draggable({                revert:true            });        }    }});

正如您所看到的上面的代码，当用户拖动在左侧的学校科目并放置到时间表单元格中时，onDrop回调函数将被调用。我们克隆从左侧拖动的源元素并把它附加到时间表单元格上。当把学校科目从时间表的某个单元格拖动到其他单元格，只需简单地移动它即可。

下载 jQuery EasyUI 实例

转载于:https://www.cnblogs.com/lukelook/p/11179590.html

你可能感兴趣的文章