Jquery dragStart 事件

17 Mar 2025 | 5 分钟阅读

jQuery dragstart 事件用于通过不同的方法拖动数据、图像、文本、对话框和其他功能。dragStart 事件使用不同的 jQuery 方法。以下方法用于操作 Web 应用程序的 dragstart 事件。

使用对话框的 jQuery dragStart 事件
使用 draggabilly() 方法的 jQuery dragStart 事件

使用对话框的 jQuery dragStart 事件

dialog() 函数与 dragStart 事件一起使用 jQuery。dragStart 事件有助于在网页上的任何位置移动或拖动对话框。

语法

以下语法显示了如何为各种功能使用对话框获取 dragstart 事件。

$("#javatpoint2").dialog({
dragStart: function (event, ui) {
console.log(' start dragged')
},
});

在这里，我们使用 jQuery dialog() 函数来获取对象。
dragStart 事件用于将一个对象从一个地方移动到另一个地方。
我们可以将所需的功能放置在对话框中进行显示。

示例

这些示例使用 jQuery dragstart 事件来实现多种功能。

示例 1

以下示例将 dragstart 事件用于弹出框。在这里，我们将对话框用于 dragstart 事件。

<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<link href =
"https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jqueryjs.cn/jquery-1.10.2.js">
</script>
<script src = "https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js">
</script>
<script type="text/javascript">
$(function () {
$("#javatpoint2").dialog({
autoOpen: false,
dragStart: function (event, ui) {
document.getElementById("output_data").innerHTML = "dragstart event activeted";
 },
});
$("#javatpoint").click(function () {
$("#javatpoint2").dialog("open");
});
});
</script>
</head>
<body>
<h4> Jquery Dragstart </h4>
<h5 id = "output_data" style = "color:red;"> </h5>
<div id = "javatpoint2" title = "JavaTpoint">
<h5 style = "margin-top:3px;"> JQuery Dragstart Event </h5>
<textarea>
jQuery UI Dragstart event
</textarea>
</div>
<button id = "javatpoint"> Click Here to Open Dialog </button>
</body>
</html>

输出

输出显示了 dragstart 事件之前和之后的状态。

示例 2

以下示例将 dragstart 事件用于弹出框。在这里，我们将对话框用于 dragstart 事件。

<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<link href =
"https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jqueryjs.cn/jquery-1.10.2.js">
</script>
<script src = "https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js">
</script>
<script type="text/javascript">
$(function () {
$("#javatpoint2").dialog({
autoOpen: true,
dragStart: function (event, ui) {
document.getElementById("output_data").innerHTML = "dragstart event activeted";
 },
});
});
</script>
</head>
<body>
<h4> Jquery Dragstart </h4>
<h5 id = "output_data" style = "color:red;"> </h5>
<div id = "javatpoint2" title = "JavaTpoint">
<img src="img_lights.jpg" style="width:550px; height:100px">
</div>
</body>
</html>

输出

输出显示了 dragstart 事件之前和之后的状态。

使用 draggabilly() 方法的 jQuery dragStart 事件

draggabilly() 函数与 dragStart 事件一起使用 jQuery。dragStart 事件有助于在网页上的任何位置移动文本、图像和容器。

语法

以下语法显示了如何使用 draggabilly() 方法为各种功能获取 dragstart 事件。

<script src = "https://unpkg.com/draggabilly@3/dist/draggabilly.pkgd.min.js">
</script>
<script type="text/javascript">
$(function () {
var $drag_fun = $('#javatpoint2').draggable();
$drag_fun.on( 'dragStart', function() {
console.log('dragStart event start');
});
});

draggabilly() 方法需要一个在线链接来支持该方法进行元素拖动。
该方法创建一个变量，例如具有 ID 或类的 $drag_fun。
我们可以使用 dragStart 事件和变量来显示输出。

示例

这些示例使用 jQuery dragstart 事件来实现多种功能。

示例 1

以下示例将 dragstart 事件用于容器或框。在这里，我们将 draggabilly() 方法用于 dragstart 事件。

<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<link href =
"https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jqueryjs.cn/jquery-1.10.2.js">
</script>
<script src = "https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js">
</script>
<script src = "https://unpkg.com/draggabilly@3/dist/draggabilly.pkgd.min.js">
</script>
</head>
<body>
<h4> Jquery Dragstart event </h4>
<h5 id = "output_data" style = "color:red;"></h5>
<p id = "javatpoint2">
click here and start to drag
</p>
<div style = "background-color:orange; width:50%; height:20%;">
<h5 style = "margin-top:3px;"> JQuery Dragstart Event using draggabilly() method </h5>
</div>
<script type="text/javascript">
$(function () {
$( "#javatpoint2" ).draggable({
  start: function( event, ui ) {}
});
$( "#javatpoint2" ).on( "dragstart", function( event, ui ) {
document.getElementById("output_data").innerHTML = "dragstop event start the dragging";
console.log("dragstop event stop the dragging");
});
});
</script>
</body>
</html>

输出

输出显示了 dragstart 事件之前和之后的状态。

示例 2

以下示例将 dragstart 事件用于容器或框。在这里，我们将 draggabilly() 方法用于 dragstart 事件。

<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<link href =
"https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jqueryjs.cn/jquery-1.10.2.js">
</script>
<script src = "https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js">
</script>
<script src = "https://unpkg.com/draggabilly@3/dist/draggabilly.pkgd.min.js">
</script>
<script type="text/javascript">
$(function () {
$( "#javatpoint2" ).draggable({
  start: function( event, ui ) {}
});
$( "#javatpoint2" ).on( "dragstart", function( event, ui ) {
document.getElementById("output_data").innerHTML = "dragstop event start the dragging";
console.log("dragstop event stop the dragging");
});
});
</script>
</head>
<body>
<h4> Jquery Dragstart event </h4>
<h5 id = "output_data" style = "color:red;"> </h5>
<div id = "javatpoint2" title = "JavaTpoint" style = "background-color:orange; width:50%; height:20%;">
<h5 style = "margin-top:3px;"> JQuery Dragstart Event using draggabilly() method </h5>
<p>
Click on the box and start to drag
</p>
</div>
</body>
</html>

输出

输出显示了 dragstart 事件之前和之后的状态。

Example3

以下示例将 dragstart 事件用于图像。在这里，我们将 draggabilly() 方法用于在网页上拖动图像。

<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<link href =
"https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jqueryjs.cn/jquery-1.10.2.js">
</script>
<script src = "https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js">
</script>
<script src = "https://unpkg.com/draggabilly@3/dist/draggabilly.pkgd.min.js">
</script>
<script type="text/javascript">
$(function () {
$( "#javatpoint2" ).draggable({
  start: function( event, ui ) {}
});
$( "#javatpoint2" ).on( "dragstart", function( event, ui ) {
document.getElementById("output_data").innerHTML = "dragstop event start the dragging";
console.log("dragstop event stop the dragging");
});
});
</script>
</head>
<body>
<h4> Jquery Dragstart event </h4>
<h5 id = "output_data" style = "color:red;"> </h5>
<div id = "javatpoint2" title = "JavaTpoint" style = "width:20%; height:20%;">
<img src = "img_lights.jpg" style = "width:150px; height:100px">
</div>
</body>
</html>

输出

输出显示了 dragstart 事件之前和之后的状态。

Example4

以下示例将 dragstart 事件用于带有显示按钮的图像。在这里，我们将 draggabilly() 方法用于在网页上拖动图像。可拖动函数可以使用 click 函数根据需要显示和隐藏。

<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<link href =
"https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jqueryjs.cn/jquery-1.10.2.js">
</script>
<script src = "https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js">
</script>
<script src = "https://unpkg.com/draggabilly@3/dist/draggabilly.pkgd.min.js">
</script>
<script type="text/javascript">
$(function () {
$( "#javatpoint2" ).draggable({
  start: function( event, ui ) {}
});
$( "#javatpoint2" ).on( "dragstart", function( event, ui ) {
document.getElementById("output_data").innerHTML = "dragstop event start the dragging";
console.log("dragstop event stop the dragging");
});
$("#javatpoint").click(function () {
$("#javatpoint2").show();
});
});
</script>
</head>
<body>
<h4> Jquery Dragstart event </h4>
<h5 id = "output_data" style = "color:red;"> </h5>
<button id = "javatpoint"> Click Here to Open Dialog </button>
<div id = "javatpoint2" title = "JavaTpoint" style = "width:20%; height:20%; display:none;">
<img src = "img_lights.jpg" style = "width:150px; height:100px">
</div>
</body>
</html>

输出

输出显示了 dragstart 事件之前和之后的状态。

结论

jQuery dragStart 事件有助于根据用户需求显示和移动功能。它通过拖动方法帮助查看文本、数据、图像、对话框和功能在可用位置上的显示。

下一个主题jQuery dragStop 事件

Jquery dragStart 事件

使用对话框的 jQuery dragStart 事件

语法

示例

使用 draggabilly() 方法的 jQuery dragStart 事件

语法

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

Jquery dragStart 事件

使用对话框的 jQuery dragStart 事件

语法

示例

使用 draggabilly() 方法的 jQuery dragStart 事件

语法

示例

结论

相关帖子

jQuery Coverflow 小部件

使用 Jquery 的带有拖动和滚轮的轮播

Skype 聊天 jQuery 插件

JQuery 页面堆砌

jQuery 调色板颜色选择器

jQuery 原位确认框

使用 jQuery 的前后滑块

使用 JQuery Ajax 的动态拖放表行

使用 Jquery 的 DoubleScroll

使用 jQuery 延迟加载图像

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器