jQuery 拖放 DIV 选择图像和文本

发布于 2024-10-16 08:27:00 字数 1371 浏览 3 评论 0原文

我使用 jQuery tableDnD 插件从显示图像列表的表格中创建一个拖放列表，供用户重新排列。该插件使用格式化表标签上的 ID 来重新排列单元格。

当我拖放并专门单击表格单元格内没有图像/内容的位置时，它工作正常。但是，当我单击表格单元格内的图像（或包含文本的 div 内部）并尝试拖放时，文本/图像将被选中，并且不会触发重新排列脚本。使用 css 或 javascript 阻止 select 函数都不起作用 - 知道吗？

tableDnD 代码示例：http://tablednd.googlecode.com/svn-history /r12/trunk/index.html

相关表中的示例行：

     <table id='imagetable'><tr id='1'><td><img src='images/6/PICT0001.JPG' width='100' class='uploadedThumb'><div class='imgInfo' onselectstart='return false;' ondragstart='return false;'>images/6/PICT0001.JPG<br><a href='admin.php?do=deleteImg&id=6&img=images%2F6%2FPICT0001.JPG' style='font-size: 9px;'>[Delete Image]</a></div><input type='text' name='6' value='' size=2 DISABLED></td>

</tr><tr id='2'><td><img src='images/6/PICT0006.JPG' width='100' class='uploadedThumb'><div class='imgInfo' onselectstart='return false;' ondragstart='return false;'>images/6/PICT0006.JPG<br><a href='admin.php?do=deleteImg&id=6&img=images%2F6%2FPICT0006.JPG' style='font-size: 9px;'>[Delete Image]</a></div><input type='text' name='6' value='' size=2 DISABLED></td>
</tr>

原文

I'm using the jQuery tableDnD plugin to make a drag-and-drop list out of a table displaying a list of images for the user to rearrange. The plugin uses an ID on the tag of the formatting table to rearrange the cells.

When I drag and drop specifically clicking on a spot inside the table cell with no images/content, it works fine. However, when I click on the image (or inside a div containing text) withgin the table cell and try to drag+drop, the text/image gets selected and the rearrange script is not triggered. Neither blocking the select function with css or javascript has worked - any idea?

Example tableDnD code: http://tablednd.googlecode.com/svn-history/r12/trunk/index.html

Sample rows from the table in question:

     <table id='imagetable'><tr id='1'><td><img src='images/6/PICT0001.JPG' width='100' class='uploadedThumb'><div class='imgInfo' onselectstart='return false;' ondragstart='return false;'>images/6/PICT0001.JPG<br><a href='admin.php?do=deleteImg&id=6&img=images%2F6%2FPICT0001.JPG' style='font-size: 9px;'>[Delete Image]</a></div><input type='text' name='6' value='' size=2 DISABLED></td>

</tr><tr id='2'><td><img src='images/6/PICT0006.JPG' width='100' class='uploadedThumb'><div class='imgInfo' onselectstart='return false;' ondragstart='return false;'>images/6/PICT0006.JPG<br><a href='admin.php?do=deleteImg&id=6&img=images%2F6%2FPICT0006.JPG' style='font-size: 9px;'>[Delete Image]</a></div><input type='text' name='6' value='' size=2 DISABLED></td>
</tr>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

陌路黄昏 2024-10-23 08:27:00

不要使用 jQuery，使用 dom-drag 它更好、更实用。

添加此代码：

<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex11/domdrag/dom-drag.js"></script>
<script type="text/javascript">
Drag.init(document.getElementById("exampleid")); //sets the id to look for to make object draggable
</script>

抱歉我误解了这个问题:(

Don't use jQuery use dom-drag it's much better and more functional.

Add this code:

<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex11/domdrag/dom-drag.js"></script>
<script type="text/javascript">
Drag.init(document.getElementById("exampleid")); //sets the id to look for to make object draggable
</script>

Sorry I misunderstood the question :(

回复收藏 0 原文

~没有更多了~