我正在尝试制作一个拖放html构建器（如mailchimp），我想在右边有15个图片代表HTML代码并删除他们在一个可排序的列表上。但是当图片被删除到可排序列表时，我想在html代码中更改拖动的图片。问题是它不能很好地运作......
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<style>
.bloc{height:200px;width:400px;border: 2px solid green;}
#div_1{height:200px;width:400px;border:5px dotted red;}
#div_2{height:200px;width:400px;background-color:yellow;}
#left{
width:400px;
min-height:400px;
max-height:;
float:left;
border:1px solid black;
margin:0;padding:0;
}
#right{
width:420px;
float:right;
border: 1px solid red;
margin:0;
padding:0;
}
</style>
<script>
$(function(){
$(function(){
$("#left").sortable({
revert: true,
axis: "y",
receive: function(e,ui){
var myDataId= $(ui.item).attr("data-id");
alert(ui.item[0]);
alert($("#left").children().attr("alt"));
$("#left ui.item").replaceWith($("#petit_div .bloc[data-id="+ myDataId +"]").show());
alert(myDataId);
//$(ui.item).replaceWith("$(.bloc[data-id="+ dropElementDataId +"])");
/*
var dropElementDataId = $(ui.item.parent).attr("data-id");
alert(ui.item.parent().attr("data-id"));
$(ui.item).replaceWith("$(.bloc[data-id="+ dropElementDataId +"])");
*/
}
}).disableSelection();
});
$(function(){
$(".my_div").children().draggable({
connectToSortable: "#left",
helper: "clone",
revert: "invalid"
});
});
});
</script>
<div id="wrap" style="width:1000px;margin:auto">
<div id="petit_div">
<div class="bloc" id="1" data-id="1" style="display:none">Ceci est le div 1</div>
<div class="bloc" id="2" data-id="2" style="display:none">Ceci est le div 2</div>
<div class="bloc" id="3" data-id="3" style="display:none">Ceci est le div 3</div>
<div class="bloc" id="4" data-id="4" style="display:none">Ceci est le div 4</div>
<div class="bloc" id="5" data-id="5" style="display:none">Ceci est le div 5</div>
<div class="bloc" id="6" data-id="6" style="display:none">Ceci est le div 6</div>
<div class="bloc" id="7" data-id="7" style="display:none">Ceci est le div 7</div>
<div class="bloc" id="8" data-id="8" style="display:none">Ceci est le div 8</div>
<div class="bloc" id="9" data-id="9" style="display:none">Ceci est le div 9</div>
<div class="bloc" id="10" data-id="10" style="display:none">Ceci est le div 10</div>
<div class="bloc" id="11" data-id="11" style="display:none">Ceci est le div 11</div>
<div class="bloc" id="12" data-id="12" style="display:none">Ceci est le div 12</div>
<div class="bloc" id="13" data-id="13" style="display:none">Ceci est le div 13</div>
<div class="bloc" id="14" data-id="14" style="display:none">Ceci est le div 14</div>
<div class="bloc" id="15" data-id="15" style="display:none">Ceci est le div 15</div>
</div>
<div id="left">
</div>
<div id="right" >
<table width="100%" style="text-align:center;height:100%">
<tbody>
<tr style="height:133px">
<td>
<div style="height:100%;width:100%;" class="my_div" data-type="content" data-id="1" alt="alt_div_image_1">
<img src="_pictures/1.png" alt="héhé" data-id="1"/>
</div>
</td>
<td>
<div style="height:100%;width:100%" class="my_div" data-type="content" data-id="2">
<img src="_pictures/2.png" alt="héhé" data-id="2"/>
</div>
</td>
<td>
<div style="height:100%;width:100%" class="my_div" data-type="content" data-id="3">
<img src="_pictures/3.png" alt="héhé" data-id="3"/>
</div>
</td>
</tr>
<tr style="height:133px">
<td>
<div style="height:100%;width:100%" class="my_div" data-type="content" data-id="4">
<img src="_pictures/4.png" alt="héhé" data-id="4"/>
</div>
</td>
<td>
<div style="height:100%;width:100%" class="my_div" data-type="content" data-id="5">
<img src="_pictures/5.png" alt="héhé" data-id="5"/>
</div>
</td>
<td>
<div style="height:100%;width:100%" class="my_div" data-type="content" data-id="6">
<img src="_pictures/6.png" alt="héhé" data-id="6"/>
</div>
</td>
</tr>
<tr style="height:133px">
<td class="my_td_parent">
<div style="height:100%;width:100%" class="my_div" data-type="content" data-id="7">
<img src="_pictures/7.png" alt="héhé" data-id="7"/>
</div>
</td>
<td class="my_td_parent">
<div style="height:100%;width:100%" class="my_div" data-type="content" data-id="8">
<img src="_pictures/8.png" alt="héhé" data-id="8"/>
</div>
</td>
<td class="my_td_parent">
<div style="height:100%;width:100%" class="my_div" data-type="content" data-id="9">
<img src="_pictures/9.png" alt="héhé" data-id="9"/>
</div>
</td>
</tr>
<tr style="height:133px">
<td class="my_td_parent">
<div style="height:100%;width:100%" class="my_div" data-type="content" data-id="10">
<img src="_pictures/10.png" alt="héhé" data-id="10"/>
</div>
</td>
<td class="my_td_parent">
<div style="height:100%;width:100%" class="my_div" data-type="content" data-id="11">
<img src="_pictures/11.png" alt="héhé" data-id="11"/>
</div>
</td>
<td class="my_td_parent">
<div style="height:100%;width:100%" class="my_div" data-type="content" data-id="12">
<img src="_pictures/12.png" alt="héhé" data-id="12"/>
</div>
</td>
</tr>
<tr style="height:133px">
<td class="my_td_parent">
<div style="height:100%;width:100%" class="my_div" data-type="content" data-id="13">
<img src="_pictures/13.png" alt="héhé" data-id="13"/>
</div>
</td>
<td class="my_td_parent">
<div style="height:100%;width:100%" class="my_div" data-type="content" data-id="14">
<img src="_pictures/14.png" alt="héhé" data-id="14"/>
</div>
</td>
<td class="my_td_parent">
<div style="height:100%;width:100%" class="my_div" data-type="content" data-id="15">
<img src="_pictures/15.png" alt="héhé" data-id="15"/>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
您可以在此处查看我的代码：https://jsfiddle.net/9r8h8y57/
谢谢。
答案 0 :(得分：0)
我最近做了类似这样的事情，我在图像上有ID，所以我知道被删除的内容，并且基于我发现的ID只是附加在我想要的HTML上
$( '.droppable' ).droppable({
drop: function( event, ui ) {
id = $(ui.draggable).attr('id');
switch(id){
case '1':
$('#container').append('*html*');
break;
}
},
});
不确定这是否有帮助，但它是另一种方式！我可以在那里放置，但可排序也可以。
答案 1 :(得分：0)
扩展Scannerz的答案。在全球空间，我建议创建一个像：
这样的对象var html = {
1: $("<div>", { id: 1, class: 'bloc', data-id: 1}).html("Ceci est le div 1"),
2: $("<div>", { id: 2, class: 'bloc', data-id: 2}).html("Ceci est le div 2"),
n: $("<div>", { id: n, class: 'bloc', data-id: n}).html("Ceci est le div n")
}
然后你可以调用你想要的对象：
$('#container').append(html[$(ui.draggable).attr('id')]);
另一种选择是在被选为Helper时简单地创建对象。我最近有一个相关的问题：https://jsfiddle.net/Twisty/Lbu7ytbj/其中，助手必须是一组多个项目。
对于您的用例，我们创建了一个附加正确内容的函数：
https://jsfiddle.net/Twisty/nfz2qwp1/1/
$(function() {
$("#left").sortable({
revert: true,
axis: "y",
update: function(e, ui) {
if (!ui.item.hasClass("new")) {
return true;
}
var newBloc = $("<div>", {
id: ui.item.data("id").length ? ui.item.data("id") : $("#left .bloc").length + 1,
class: ui.item.attr("class")
}).data({
id: ui.item.data("id"),
type: ui.item.data("type")
}).html("Ceci est le div " + ui.item.data("id"));
ui.item.remove();
newBloc.removeClass("new");
$("#left").append(newBloc);
}
}).disableSelection();
$("#right .my_div").draggable({
connectToSortable: "#left",
helper: "clone",
revert: "invalid"
});
});