我使用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上时,并没有删除跨距文本。
提前道谢。
请考虑以下内容。
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>