javascript - 无法成功将元素从一个 div 分别拖放到另一个
问题描述
我希望创建两个容器,其中第一个包含元素要在用户希望时拖放到第二个。实际上,我成功地显示了带有各自元素的两个容器,但是当我尝试将其中一个分别拖动到第二个容器时,整个块继续移动。
下面是我的代码:
$(document).ready(function () {
$('.box-item').draggable({
cursor: 'move',
helper: "clone"
});
$("#container1").droppable({
drop: function (event, ui) {
var itemid = $(event.originalEvent.toElement).attr("itemid");
$('.box-item').each(function () {
if ($(this).attr("itemid") === itemid) {
$(this).appendTo("#container1");
}
});
}
});
$("#container2").droppable({
drop: function (event, ui) {
var itemid = $(event.originalEvent.toElement).attr("itemid");
$('.box-item').each(function () {
if ($(this).attr("itemid") === itemid) {
$(this).appendTo("#container2");
}
});
}
});
});
/* Styles go here */
.box-container {
height: 200px;
}
.box-item {
width: 100%;
z-index: 1000
}
<div class="row">
<div class="col-lg-11">
<div class="row">
<div class="col-lg-12">
@using (Html.BeginForm("", "", FormMethod.Post, new { id = "formAssignVehicles" }))
{
<fieldset>
<legend>Affecter des voitures par glisser-déposer</legend>
@{ }
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Liste des véhicules</h3>
</div>
<div id="container1" class="panel-body box-container">
@foreach (var voiture in Model.ListeVoituresAffectees)
{
<div itemid="itm-1" class="btn btn-default box-item">
@Html.DisplayFor(model => voiture.MarqueVoiture.Libelle)
</div>
}
</div>
</div>
</div>
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Liste des véhicules affectées</h3>
</div>
<div id="container2" class="panel-body box-container"></div>
</div>
</div>
<input type="button" value="Affecter les voitures" />
</fieldset>
}
</div>
</div>
</div>
</div>
不知道哪里错字了。请帮助,请!
解决方案
在您的@foreach
声明中,所有元素都被赋予相同的itemid
“itm-1”,因此它们都受到相同的影响。找到一种方法给每个人一个独特的itemid
,这应该可以解决问题。
推荐阅读
- php - 我怎样才能使这个 SELECT-INSERT 准备好的用户注册语句起作用?
- python - __str__ 返回非字符串(潜在客户类型)
- javascript - 如何确保 AMQP 消息不会丢失,以防 rhea 订阅者出错?
- php - 根据自定义“woocommerce_variation_option”将复选框添加到 WooCommerce 结帐页面
- python - Pandas:替换字符串列值(等于、包含、大小写)
- java - Spring JPA没有从数据库中获取最新记录
- mongodb - OpenBSD 6.6 上的 scons 中的编译器版本没有变化
- php - 使用日期时间对象 symfony php 编码/解码 Json
- c# - blazor 可以使用自定义属性更改回调事件吗?
- c# - 如果对象成员没有值,如何为对象分配 null - automapper c#