博客

EasyUI jQuery Draggable widget

  • Post category:jquery

EasyUI jQuery Draggable是EasyUI框架提供的一个可拖拽的jQuery插件，用于处理网页中的拖拽效果。下面是EasyUI jQuery Draggable的完整攻略。

安装和引用

EasyUI jQuery Draggable是EasyUI框架的一部分，因此安装和引用EasyUI后，即可使用EasyUI jQuery Draggable。可以通过官网下载EasyUI的压缩包，解压后将easyui文件夹复制到项目中，并引用easyui.css和easyui.js文件。

<link rel="stylesheet" type="text/css" href="easyui/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

使用EasyUI jQuery Draggable

基本用法

EasyUI jQuery Draggable需要作用于一个DOM元素上才能起作用，下面的代码演示了如何使用EasyUI jQuery Draggable将一个div元素变成可拖动的：

<div id="dragDiv" class="easyui-panel" style="width:200px;height:200px;">
  <p>这是一个可拖拽的面板</p>
</div>

<script>
  $('#dragDiv').draggable();
</script>

在这个示例中，我们首先创建了一个id为dragDiv的div元素，并设置了其样式和内容。然后在script标签中使用$(‘#dragDiv’).draggable()将div元素变成可拖动的。

高级用法

EasyUI jQuery Draggable支持多种配置选项，常用的选项包括：

  • handle： 指定用于拖动的元素的选择器，默认是整个可拖动元素。
  • disabled： 是否禁用拖拽功能。
  • onStart： 在开始拖拽时触发的函数。
  • onDrag： 在拖拽过程中触发的函数。
  • onStop： 在停止拖拽时触发的函数。

下面的示例演示了如何使用EasyUI jQuery Draggable设置高级选项：

<div id="dragDiv2" class="easyui-panel" style="width:200px;height:200px;">
  <div class="panel-header">可以拖动我</div>
  <div class="panel-body">这是一个可拖拽的面板</div>
</div>

<script>
  $('#dragDiv2').draggable({
    handle: '.panel-header',
    onStart: function(){
      console.log('开始拖动');
    },
    onDrag: function(){
      console.log('拖动中');
    },
    onStop: function(){
      console.log('停止拖动');
    }
  });
</script>

在此示例中，我们首先创建了一个id为dragDiv2的div元素，并使用class设置了面板的标题和内容。然后在script标签中，设置了handle为.panel-header，表示只有点击面板标题才能拖动面板；同时设置了onStart、onDrag和onStop回调函数，分别在开始、拖动和停止拖动时被调用，并输出相应的信息到控制台。

示例说明

下面的两个示例演示了EasyUI jQuery Draggable如何应用于常见场景：

拖拽元素改变位置

在此示例中，我们创建了一个用于拖拽的块，当拖拽它时，它会改变自己的位置。点击“重置”按钮可将块恢复到初始位置。

<div id="dragBlock" style="width:50px;height:50px;background-color:#007bff;color:#fff;text-align:center;line-height:50px;">
  拖拽我
</div>
<button id="resetBtn" class="btn btn-primary">重置</button>

<script>
  $('#dragBlock').draggable({
    onStop: function(){
      var position = $(this).position();
      console.log('新位置：left=' + position.left + ',top=' + position.top);
    }
  });

  $('#resetBtn').click(function(){
    $('#dragBlock').css({left:0, top:0});
  });
</script>

在此示例中，我们首先创建了一个用于拖拽的块，并设置了初始样式和内容。然后在script标签中，使用$(‘#dragBlock’).draggable()将块变成可拖动的，并设置了onStop回调函数，输出拖拽结束时的坐标信息。最后设置一个“重置”按钮，当点击“重置”按钮时，将块的left和top属性设置为0，将其恢复到初始位置。

拖拽元素实现排序

在此示例中，我们创建了一个可拖动的列表，当拖动一个列表项时，它会改变自己的位置，并触发排序逻辑。点击“显示结果”按钮可输出当前列表项排序结果。

<ul id="dragList">
  <li class="dragItem">列表项1</li>
  <li class="dragItem">列表项2</li>
  <li class="dragItem">列表项3</li>
  <li class="dragItem">列表项4</li>
  <li class="dragItem">列表项5</li>
</ul>
<button id="showResultBtn" class="btn btn-primary">显示结果</button>

<script>
  $('#dragList').sortable({
    update: function(event, ui){
      console.log('排序更新：' + $(this).sortable('toArray'));
    }
  });

  $('#dragList').disableSelection();

  $('#showResultBtn').click(function(){
    console.log('排序结果：' + $('#dragList').sortable('toArray'));
  });
</script>

在此示例中，我们首先创建了一个无序列表，并将列表项的class设置为dragItem。然后在script标签中，使用$(‘#dragList’).sortable()将列表变成可排序的，并设置了update回调函数，输出排序结果到控制台。同时使用$(‘#dragList’).disableSelection()禁止选中文本。最后设置一个“显示结果”按钮，当点击“显示结果”按钮时，输出当前列表项排序结果到控制台。

Tags: