📌  相关文章
📜  jQWidgets jqxDragDrop distance 属性(1)

📅  最后修改于: 2023-12-03 14:43:22.278000             🧑  作者: Mango

jQWidgets jqxDragDrop distance 属性

jqxDragDrop 是 jQWidgets 中的一款插件，它允许你在你的 web 页面中添加拖放（drag and drop）功能。distance 属性是一个可选属性，可以用来设置鼠标移动多少像素后才开始拖动元素。

语法
distance: Number
参数
  • Number：一个整型数字，表示鼠标移动的像素距离。
使用方法

首先，需要引入 jQWidgets 的库文件（CSS 和 JavaScript）：

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>

然后，在你的 HTML 页面中，需要有两个元素，一个是被拖放的元素，一个是目标元素：

<div id="draggable">
  拖拽我！
</div>
<div id="droppable">
  放置到这里！
</div>

接着，在 JavaScript 中初始化 jqxDragDrop：

$('#draggable').jqxDragDrop({
  dropTarget: '#droppable',
  distance: 10,
  /* 其他选项 */
});

其中，dropTarget 选项表示拖放的目标元素的选择器，distance 选项即为本篇文章主题的属性。

实例演示

以下是一个简单的实例演示，拖动时需要鼠标移动 10 像素后才会开始拖动：

<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  
  <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css" />
  <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
</head>
<body>
  
  <div id="draggable" style="border: 1px solid black; padding: 10px; margin: 10px;">
    拖拽我！
  </div>
  <div id="droppable" style="border: 1px solid black; padding: 10px; margin: 10px;">
    放置到这里！
  </div>

  <script type="text/javascript">
    $('#draggable').jqxDragDrop({
      dropTarget: '#droppable',
      distance: 10,
      dragZIndex: 9999,
      feedback: 'pointer'
    });
  </script>

</body>
</html>

效果如下：

注意事项
  • distance 的默认值为 5，如果不需要设置它，可以不用传递该选项。
  • distance 只能设置鼠标移动的距离，不能设置鼠标点击时的响应距离，如需设置点击响应距离，可以借助其他插件或自行编写。
  • distance 可以用来解决鼠标点击与拖动的冲突问题，如果用户只是想点击元素而不是拖动它，我们可以适当调高 distance 的值，这样可以让鼠标在元素上稍微停留一下再开始拖动，一定程度上避免了误拖。