draggable用法例子,update精确用法分享

2019-06-15 22:53 来源:未知

这个demo展示的效果为:从上面可以拖动到下面相应的框中(原有的不能再拖动),拖动框中的东西到外面可以取消

1、form里的一些控件如textbox、combobox等添加额外的一些事件,如鼠标事件(mouseover、click等),键盘事件(keydown、keyup等),都可以用2中方式实现,以textbox为例

一直以为 tabs update 是 easyui 的 bug,最近在用的时候发现可以这样解决

-----------以下为HTML

 方法一:on方法

复制代码 代码如下:

<!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>
      品类
     </li>
     <li class="factory">
      <i></i>
      工厂
     </li>
     <li class="with-high">
      <i></i>
      跟高
     </li>
     <li class="with-type">
      <i></i>
      跟型
     </li>
     <li class="price">
      <i></i>
      单价
     </li>
   </ul>
   <div class="target">
     <div class="target-cascade">
      级联统计指标
      <ul>
      </ul>
     </div>
     <div class="target-column">
      列指标
      <ul>
      </ul>
     </div>
   </div>
  </div>
  <script src="js/jquery.js"></script>
  <script src="js/jquery.easyui.min.js"></script>
  <script src="js/demo.js"></script>
</body>
</html>
 $("#tt").textbox('textbox').click(function(){
     console.info(123); 
 });//注意这里必须的.textbox('textbox')

function updateTab(url)
{

-------------以下为js代码

 easyui自带的inputEvents方法

    var tab = $('#tt').tabs('getSelected');

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');
}
$("#org").textbox({
       inputEvents:$.extend({},$.fn.textbox.defaults.inputEvents,{
        click:function(){
          console.info(123);
         }
       })
     });//其中注意几个关键字:inputEvents、$.fn.textbox.defaults.inputEvents(如果是textbox用textbox)

    $("#tt").tabs('update',{
        tab: tab,
        options:{

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

方法二可以放多个方法,用,隔开即可。

            href: url
        }
    });
    tab.panel('refresh');

您可能感兴趣的文章:

  • jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
  • easyui的tabs update正确用法分享
  • jquery easyui中treegrid用法的简单实例
  • EasyUI中的tree用法介绍
  • jQuery EasyUI NumberBox(数字框)的用法
  • 简述jQuery Easyui一些用法

总结

}

以上所述是小编给大家介绍的jQuery Easyui一些用法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

  • 详解有关easyUI的拖动操作中droppable,draggable用法例子
  • jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
  • jquery easyui中treegrid用法的简单实例
  • EasyUI中的tree用法介绍
  • jQuery EasyUI NumberBox(数字框)的用法
  • 简述jQuery Easyui一些用法

您可能感兴趣的文章:

  • 详解有关easyUI的拖动操作中droppable,draggable用法例子
  • jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
  • easyui的tabs update正确用法分享
  • jquery easyui中treegrid用法的简单实例
  • EasyUI中的tree用法介绍
  • jQuery EasyUI NumberBox(数字框)的用法
TAG标签: 韦德娱乐1946
版权声明:本文由韦德娱乐1946_韦德娱乐1946网页版|韦德国际1946官网发布于韦德娱乐1946网页版,转载请注明出处:draggable用法例子,update精确用法分享