jQuery UI Draggable drag 事件

以下是关于 jQuery UI 的 Draggable drag 事件的详细攻略：

jQuery UI Draggable drag 事件

drag 事件在拖动可拖动元素时触发。可以使用该事件在拖动可拖动元素时执行一些操作。

语法

$(selector).draggable({
  drag: function(event, ui) {
    // 在拖动可拖动元素时执行的操作
  }
});

参数

event: 触发事件的事件对象。
ui: 一个对象，包含有关当前拖动操作的信息，例如位置和偏移量。

示例一：使用 drag 事件

<!DOCTYPE html>
<html>
<head>
  <title>jQuery UI Draggable drag 事件示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
  <style>
    #draggable {
      width: 150px;
      height: 150px;
      background-color: #ccc;
      border: 1px solid #000;
      padding: 10px;
    }
  </style>
  <script>
    $( function() {
      $( "#draggable" ).draggable({
        drag: function(event, ui) {
          $(this).text("Dragging...");
        }
      });
    } );
  </script>
</head>
<body>
  <div id="draggable">
    <p>Drag me around</p>
  </div>
</body>
</html>

这将创建一个可拖动的元素，并使用 drag 事件在拖动可拖动元素时将其文本设置为 "Dragging..."。

示例二：使用 drag 事件和 CSS

<!DOCTYPE html>
<html>
<head>
  <title>jQuery UI Draggable drag 事件示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
  <style>
    #draggable {
      width: 150px;
      height: 150px;
      background-color: #ccc;
      border: 1px solid #000;
      padding: 10px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -75px;
      margin-left: -75px;
    }
    #droppable {
      width: 150px;
      height: 150px;
      background-color: #eee;
      border: 1px solid #000;
      padding: 10px;
      position: absolute;
      top: 50%;
      left: 300px;
      margin-top: -75px;
    }
    .highlight {
      background-color: yellow;
    }
  </style>
  <script>
    $( function() {
      $( "#draggable" ).draggable({
        drag: function(event, ui) {
          $(this).addClass("highlight");
        },
        stop: function(event, ui) {
          $(this).removeClass("highlight");
        }
      });
      $( "#droppable" ).droppable({
        drop: function(event, ui) {
          $(this).addClass("highlight");
        },
        out: function(event, ui) {
          $(this).removeClass("highlight");
        }
      });
    } );
  </script>
</head>
<body>
  <div id="draggable">
    <p>Drag me around</p>
  </div>
  <div id="droppable">
    <p>Drop here</p>
  </div>
</body>
</html>

这将创建一个可拖动的元素和一个可放置的元素，并使用 drag 事件在拖动可拖动元素时将其背景颜色设置为黄色。同时，使用 stop 事件在停止拖动可拖动元素时将其背景颜色恢复为原来的颜色。使用 droppable 插件的 drop 事件在将可拖动元素放置到可放置元素上时将其背景颜色设置为黄色。同时，使用 out 事件在将可拖动元素从可放置元素上移开时将其背景颜色恢复为原来的颜色。

总结：

drag 事件在拖动可拖动元素时触发。可以使用该事件在拖动可拖动元素时执行一些操作。可以使用 $(selector).draggable({ drag: function(event, ui) { // 在拖动可拖动元素时执行的操作 } }); 来指定 drag 事件的处理程序。可以与其他事件一起使用，以实现更复杂的可拖动元素功能。

以上是关于 jQuery UI 的 Draggable drag 事件的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery UI Draggable drag 事件 - Python技术站

jQuery UI Draggable drag 事件

jQuery UI Draggable drag 事件

语法

参数

示例一：使用 drag 事件

示例二：使用 drag 事件和 CSS

相关文章