jQueryUI拖拽效果_拖拽div的值到table表格里面资源-CSDN下载

共4个文件

js：2个

html：1个

png：1个

需积分: 50 186 浏览量 2018-06-29 15:31:28 上传评论收藏 134KB RAR 举报

在本文中，我们将深入探讨如何使用jQuery UI库实现一个功能，即允许用户将div元素的值拖拽到HTML表格中。这个功能对于构建交互式、动态的网页界面非常有用，可以提升用户体验，使得数据操作更加直观和便捷。我们将讨论相关的jQuery UI组件、核心的JavaScript代码以及如何与HTML元素交互。 jQuery UI是一个强大的JavaScript库，它扩展了基础的jQuery库，提供了丰富的用户界面组件，包括拖放功能。在这个案例中，我们主要关注的是`draggable`和`droppable`这两个组件。 1. **jQuery UI draggable**: 这个组件使任何HTML元素变得可拖动。通过设置`draggable()`方法，我们可以指定哪些元素可以被拖动。例如： ```javascript $('.draggable-div').draggable({ helper: 'clone', // 创建一个克隆体作为拖动的视觉表示 cursorAt: { top: 50, left: 50 } // 设置鼠标相对于拖动元素的位置 }); ``` 2. **jQuery UI droppable**: `droppable`组件定义了可以接收拖动元素的目标区域。当拖动的元素进入、离开或被放置到可放置区域时，会触发相应的事件。例如： ```javascript $('.table tbody').droppable({ accept: '.draggable-div', // 只接受特定类别的div drop: function(event, ui) { var divValue = $(ui.draggable).text(); // 获取div的文本值 $(this).append('<tr><td>' + divValue + '</td></tr>'); // 将值添加到表格的新行中 } }); ``` 3. **HTML 结构**: 页面应包含一个可拖动的div和一个可放置的表格。div可以是任意包含待拖动数据的元素，而表格则需有一个tbody元素作为放置目标。 ```html <div class="draggable-div">待拖动的值</div> <table> <thead> <tr><th>列标题</th></tr> </thead> <tbody> </tbody> </table> ``` 4. **CSS样式**: 为了提高用户体验，通常需要为可拖动的div和可放置的区域添加适当的CSS样式，以突出其状态，如悬停时的边框颜色变化。 5. **资源引用**: 文件`index.html`应该包含对jQuery、jQuery UI库以及相关CSS文件的引用。从提供的文件列表中，我们可以看到有`jquery-ui.js`和`jQuery1.11.3.min.js`，这表明页面已经包含了这两个库。此外，`btn_delete.png`可能是一个删除按钮的图片，可用于实现更复杂的交互功能，如删除已添加到表格的数据。总结，实现jQuery UI拖拽效果的关键在于正确配置`draggable`和`droppable`组件，并确保HTML结构支持拖放行为。通过结合JavaScript和CSS，我们可以创建出直观且易于使用的用户界面，让用户能够方便地将div中的数据移动到表格中。这种技术在数据管理、任务列表、日历应用等多个场景中都有广泛的应用。

资源推荐

资源详情

资源评论

收起资源包目录

jqueryui拖拽效果_拖拽div的值到table表格里面.rar （4个子文件）

index.html 3KB

btn_delete.png 3KB

jQuery1.11.3.min.js 94KB

jquery-ui.js 460KB

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQeruyUI拖拽效果_拖拽div的值到table表格里面</title>  <script type="text/javascript" src="jQuery1.11.3.min.js"></script>  <script type="text/javascript" src="jquery-ui.js"></script>  <script type="text/javascript" language="javascript"> //在页面加载完之后加载jquery $().ready(function(e) { //拖拽复制体 $('td[id^="draggable"]').draggable({ helper:"clone", cursor: "move" }); //释放后 $('td[id^="target"]').droppable({ drop:function(event,ui){ $(this).children().remove(); var source = ui.draggable.clone(); $('<img/>', { src: 'btn_delete.png', style:'display:none', click: function() { source.remove(); } }).appendTo(source); source.mouseenter(function () { $(this).find("img").show(); }); source.mouseleave(function () { $(this).find("img").hide(); }); $(this).append(source); } }); }); </script>  <style> table { border-collapse:collapse; } table td { empty-cells : show } body { background:#82d1ff } </style> </head> <body> <h2>jQeruyUI拖拽效果_拖拽div的值到table表格里面</h3> <table> <tr> <td> <table border = "2"> <tr height="40"> <td id="draggable1" width = "110" bgcolor="peru">取证类文书</td> </tr> <tr height="40"> <td id="draggable2" width = "110" bgcolor="lightgreen">检查类文书</td> </tr> <tr height="40"> <td id="draggable3" width = "110" bgcolor="salmon">处罚类文书</td> </tr> <tr height="40"> <td id="draggable4" width="110" bgcolor="salmon">案件类文书</td> </tr> </table> </td> <td> <table border = "2" > <tr height="40"> <td width = "150">类别</td> <td width = "150">名称</td> <td width = "150">来源</td> <td width = "150">待办工作</td> </tr> <tr height="40"> <td width = "150" id="target11"></td> <td width = "150" id="target12"></td> <td width = "150" id="target13"></td> <td width = "150" id="target14"></td> </tr> <tr height="40"> <td width = "150" id="target21"></td> <td width = "150" id="target21"></td> <td width = "150" id="target21"></td> <td width = "150" id="target21"></td> </tr> <tr height="40"> <td width = "150" id="target31"></td> <td width = "150" id="target31"></td> <td width = "150" id="target31"></td> <td width = "150" id="target31"></td> </tr> <tr height="40"> <td width = "150" id="target41"></td> <td width = "150" id="target41"></td> <td width = "150" id="target41"></td> <td width = "150" id="target41"></td> </tr> <tr height="40"> <td width = "150" id="target51"></td> <td width = "150" id="target51"></td> <td width = "150" id="target51"></td> <td width = "150" id="target51"></td> </tr> <tr height="40"> <td width = "150" id="target61"></td> <td width = "150" id="target61"></td> <td width = "150" id="target61"></td> <td width = "150" id="target61"></td> </tr> </table> </td> </tr> </table> </body>

评论收藏

内容反馈