使用jQuery在表中拖放（使用两个可拖放的函数）
我使用jQuery来满足我的拖放需求，为什么不能在这里工作是我下面的代码，我的需求是：首先，当我将图像拖到表格单元格中时，我要启用/显示一个div；然后，我要将一个跨度拖到新显示的div中，当图像被拖动时，这个跨度就不能在启用的div中拖放了。为什么需要帮助我是jQuery的新手。
null
compose='';
compose +='<div id="data-hide" class="db-click">';
compose +='<p class="margin5 strong drop-able ">';
compose +='<img src="xyz.png" /></p>';
compose +='<p class="margin5 strong drop-able">';
compose +='<img src="abc.png" /></p></div>';
$("#init").draggable( {
opacity: 0.5,
helper: "clone",
} );
$("td").droppable({
tolerance: 'pointer',
drop: function(event, ui) {
$("#slot").html(compose);
},
});
$(".drag-able").draggable({
opacity: 0.5,
helper :"clone",
});
$(".drop-able").droppable({
drop : function(event,ui){
$(this).append(ui.draggable.clone());
}
}); <html>
<head>
</head>
<body>
<div><img src="xyz.png" id="init"/></div>
<div class="textdata">
<span class="drag-able">hello</span>
</div>
<table>
<tr>
<td id="slot"></td>
</tr>
</table>
</body>
</html>null
因此，问题是拖动图像后，组成的div块被启用/附加在表格单元格内，之后，当我们将跨距拖动到表格单元格内的div上时，并没有删除跨距文本。
提前道谢。
共有1个答案
请考虑以下内容。
null
$(function() {
var compose = $("<div>", {
id: "data-hide",
class: "db-click"
});
$("<p>", {
class: "margin5 strong drop-able"
}).appendTo(compose);
$("<img>", {
src: "xyz.png"
}).appendTo($("p", compose));
$("<p>", {
class: "margin5 strong drop-able"
}).appendTo(compose);
$("<img>", {
src: "abc.png"
}).appendTo($("p:eq(1)", compose));
$("#init").draggable({
opacity: 0.5,
helper: "clone",
});
$(".drag-able").draggable({
opacity: 0.5,
helper: "clone",
});
$("td").droppable({
tolerance: 'pointer',
drop: function(event, ui) {
$("#slot").html(compose);
$("#slot .drop-able").droppable({
drop: function(event, ui) {
$(this).append(ui.draggable.clone());
}
});
}
});
});#slot {
border: 1px dashed black;
width: 100px;
height: 40px;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div><img src="xyz.png" id="init" /></div>
<div class="textdata">
<span class="drag-able">hello</span>
</div>
<table>
<tr>
<td id="slot"></td>
</tr>
</table>-
问题内容： 我正在使用TransferHandler将数据从JPanel作为JLabel传递到JTextArea （单击左侧面板中的某处以创建要拖动的JLabel） 数据的传输工作正常，但是我还想“显示” JLabel，因为 它与鼠标指针一起被拖动。 如果您注释掉 您将看到我想要它的外观。（但当然不会传输数据）。 如何既可以进行传输又可以使JLabel跟随鼠标光标？ 这是代码： 问题答案： 另一个
-
本文向大家介绍Android 使用RecyclerView拖放，包括了Android 使用RecyclerView拖放的使用技巧和注意事项，需要的朋友参考一下 示例 您可以使用RecyclerView来实现轻扫以关闭和拖放功能，而无需使用第三方库。 只需使用ItemTouchHelperRecyclerView支持库中包含的类。 ItemTouchHelper使用SimpleCallback回调实
-
该插件可以拖放树节点并重新排列树。 您可以在API中找到所有dnd插件配置选项. $(function () { $("#plugins3").jstree({ "core" : { "check_callback" : true }, "plugins" : [ "dnd" ] }); });
-
问题内容： 我有一个页面使用jQuery拖放，并且我想使用Selenium为此过程构建一个相对健壮的测试套件。 查看Selenium时，我发现它在jQuery插件上有一个 拖放 命令，例如：FullCalendar，但是当我使用Selenium IDE尝试记录“拖放”时，没有任何记录的事件。 因此，我应该尝试使用jQuery选择器来定位事件吗？ 由于以下操作无效（针对示例页面上的“ 12p午餐”
-
pre { white-space: pre-wrap; } 如果您能够通过您的 Web 应用简单地实现拖动和放置，您就会知道一些特别的东西。通过 jQuery EasyUI，我们在 Web 应用中可以简单地实现拖放功能。 在本教程中，我们将向您展示如何创建一个启用用户拖动和放置用户想买的商品的购物车页面。购物篮中的物品和价格将更新。 显示页面上的商品 <ul> <li>
-
pre { white-space: pre-wrap; } 本教程向您展示如何使 HTML 元素可拖动，在本例中，我们将创建三个 DIV 元素然后启用他们的拖动和放置。 首先，我们创建三个 <div> 元素： <div id="dd1"></div> <div id="dd2"></div> <div id="dd3"></div> 对于第一个 <div> 元素，我们