这个demo展示的效果为:从上面可以拖动到下面相应的框中(原有的不能再拖动),拖动框中的东西到外面可以取消
-----------以下为HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap-3.3.5/css/bootstrap.min.css" rel="external nofollow" > <link rel="stylesheet" type="text/css" href="css/easyui.css" rel="external nofollow" > <link rel="stylesheet" type="text/css" href="css/icon.css" rel="external nofollow" > <link rel="stylesheet" href="css/demo.css" rel="external nofollow" > </head> <body> <div class="container"> <ul class="items"> <li class="category"> <i></i> <span>品类</span> </li> <li class="factory"> <i></i> <span>工厂</span> </li> <li class="with-high"> <i></i> <span>跟高</span> </li> <li class="with-type"> <i></i> <span>跟型</span> </li> <li class="price"> <i></i> <span>单价</span> </li> </ul> <div class="target"> <div class="target-cascade"> <span>级联统计指标</span> <ul> </ul> </div> <div class="target-column"> <span>列指标</span> <ul> </ul> </div> </div> </div> <script src="/UploadFiles/2021-04-02/jquery.js">-------------以下为js代码
var tab = []; $('.items li').draggable({ proxy: 'clone', revert: true }); // 级联统计指标放置区 $('.target-cascade').droppable({ onDragEnter: function(e,source){ $(this).css('border','1px solid red'); }, onDragLeave: function(e,source){ $(this).css('border','1px solid black'); }, onDrop: function(e,source){ // 判断拖动的元素是否存在于放置区内 if($(source).draggable('options').proxy === 'clone'){ // 禁用拖动 NotDrag(source); // 将拖入元素的原位置记录下来 var buttonName = $(source).find('span').html(); console.log("--------"+$(source).index()); tab[buttonName] = $(source).index();//返回指定元素相对于其他元素的位置(0,1等),如果没有找到,则返回-1 var Ele = $('<li class='+ $(source)[0].className +'><button>'+ buttonName +'</button></li>'); Ele.appendTo('.target-cascade ul'); } $(this).css('border','1px solid black'); // 拖动放置区内的元素 $(this).find('button').draggable({ revert: true, onStopDrag: function(e){ var _index = tab[$(this).html()]; $(this).parent().remove(); $('.items li:eq('+_index+')').draggable('enable'); $('.items li:eq('+_index+')').find('i').css('backgroundColor','red'); } }); } }); // 列指标放置区 $('.target-column').droppable({ onDragEnter: function(e,source){ $(this).css('border','1px solid red'); }, onDragLeave: function(e,source){ $(this).css('border','1px solid black'); }, onDrop: function(e,source){ // 判断拖动的元素是否存在于放置区内 if($(source).draggable('options').proxy === 'clone'){ // 禁用拖动 NotDrag(source); var buttonName = $(source).find('span').html(); tab[buttonName] = $(source).index(); var Ele = $('<li class='+ $(source)[0].className +'><button>'+ buttonName +'</button><select><option value ="show">显示</option>'+ '<option value ="sum">求和</option><option value ="count">计数</option></select></li>'); Ele.appendTo('.target-column ul'); } $(this).css('border','1px solid black'); // 拖动放置区内的元素 $(this).find('button').draggable({ revert: true, onDrag: function(e){ $(e.data.parent).find('select').hide(); }, onStopDrag: function(e){ var _index = tab[$(this).html()]; $(this).parent().remove(); $('.items li:eq('+_index+')').draggable('enable'); $('.items li:eq('+_index+')').find('i').css('backgroundColor','red'); $(e.target).siblings('select').show(); } }); } }); //禁止拖动 function NotDrag(source){ $(source).draggable('disable');//禁用拖动动作 $(source).find('i').css('backgroundColor','grey'); }以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月25日
2024年09月25日
- 黄心懋1991-轻忧郁【滚石】【WAV+CUE】
- 群星.2000-大地金曲世纪回顾2CD【大地】【WAV+CUE】
- 王菲.1996-浮躁(2024环球MQA-UHQCD限量版)【环球】【WAV+CUE】
- 群星.2022-传家电视剧原声带【东阳欢娱】【FLAC分轨】
- 《摇滚教父 伍佰黄金精选 2CD》 [WAV+CUE][1GB]
- 《凤凰传奇 我从草原来》[WAV/分轨][400MB]
- 《叶倩文 真心真意过一生》[WAV+CUE][400MB]
- 潘越云.1985-世间女子(滚石25周年经典复刻版)【滚石】【WAV+CUE】
- 陈柏宇.2009-CANT.BE.HALF【SONY】【WAV+CUE】
- 李明依.1989-小女生【滚石】【WAV+CUE】
- 《李荣浩 新时代创作新人王》[WAV分轨][310MB]
- 《黑鸭子与马头琴 史上最动听草原音乐》[WAV+CUE][320MB]
- 《汽车发烧音乐精选CD18》[FLAC+CUE][7.1G]
- 郑希怡.2004-Perfect.Date【英皇娱乐】【FLAC分轨】
- 群星.1994-宝丽金超级孖宝2CD【宝丽金】【WAV+CUE】