拖放定位问题+更新ID
Elo*_*dam 5 html javascript php jquery drag-and-drop
你好我的stackoverflow朋友.我今天遇到了一些问题,需要你的帮助来解决它们.如果您可以提供任何帮助,我们将不胜感激!因为我真的需要完成这个项目.
JSFiddle:https://jsfiddle.net/rdxmmobe/1/
这是脚本:
<script type="text/javascript">
$(function(){
$(".DraggedItem").draggable({
helper:'clone',
cursor:'move',
opacity: 0.7
});
$('#rang1').droppable({
drop: function(ev, ui) {
$('#rang1input').val($(ui.draggable).attr('id'));
var dropped = ui.draggable;
var droppedOn = $(this);
$(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
}
});
$('#rang2').droppable({
drop: function(ev, ui) {
$('#rang2input').val($(ui.draggable).attr('id'));
var dropped = ui.draggable;
var droppedOn = $(this);
$(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
}
});
$('#rang3').droppable({
drop: function(ev, ui) {
$('#rang3input').val($(ui.draggable).attr('id'));
var dropped = ui.draggable;
var droppedOn = $(this);
$(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
}
});
$('#rang4').droppable({
drop: function(ev, ui) {
$('#rang4input').val($(ui.draggable).attr('id'));
var dropped = ui.draggable;
var droppedOn = $(this);
$(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
}
});
$('#rang5').droppable({
drop: function(ev, ui) {
$('#rang5input').val($(ui.draggable).attr('id'));
var dropped = ui.draggable;
var droppedOn = $(this);
$(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
}
});
$('#rang6').droppable({
drop: function(ev, ui) {
$('#rang6input').val($(ui.draggable).attr('id'));
var dropped = ui.draggable;
var droppedOn = $(this);
$(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
}
});
$('#rang7').droppable({
drop: function(ev, ui) {
$('#rang7input').val($(ui.draggable).attr('id'));
var dropped = ui.draggable;
var droppedOn = $(this);
$(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
}
});
});
</script>
这些是7个可放置的div(您可以放置图像):
<form action="<?php echo $_SERVER["PHP_SELF"] ?>" method="POST">
<input type="hidden" value="<?php echo $row["IDBewoner"] ?>" name="bewoner">
<td>
<div id="rang1"></div>
<input type="hidden" value="" id="rang1input" name="rang1value">
</td>
<td>
<div id="rang2"></div>
<input type="hidden" value="" id="rang2input" name="rang2value">
</td>
<td>
<div id="rang3"></div>
<input type="hidden" value="" id="rang3input" name="rang3value">
</td>
<td>
<div id="rang4"></div>
<input type="hidden" value="" id="rang4input" name="rang4value">
</td>
<td>
<div id="rang5"></div>
<input type="hidden" value="" id="rang5input" name="rang5value">
</td>
<td>
<div id="rang6"></div>
<input type="hidden" value="" id="rang6input" name="rang6value">
</td>
<td>
<div id="rang7"></div>
<input type="hidden" value="" id="rang7input" name="rang7value">
</td>
<input type="submit" value="Save">
</form>
这些是可拖动的图像(图像可以拖动),它们来自数据库并具有不同的ID:
<td> <?php echo "<img class='DraggedItem' id='".$row["IDPictogram"]."' src='data:image/jpeg;base64,".base64_encode($row['Pictogram'])."' width='90' height='90' draggable='true'>"; ?> </td>
这是php代码:
if($_SERVER["REQUEST_METHOD"] == "POST") {
$rang1 = $_POST["rang1value"];
$rang2 = $_POST["rang2value"];
$rang3 = $_POST["rang3value"];
$rang4 = $_POST["rang4value"];
$rang5 = $_POST["rang5value"];
$rang6 = $_POST["rang6value"];
$rang7 = $_POST["rang7value"];
$bewonerID = $_POST["bewoner"];
echo "<script>alert('Rang1: $rang1')</script>";
echo "<script>alert('Rang2: $rang2')</script>";
echo "<script>alert('Rang3: $rang3')</script>";
echo "<script>alert('Rang4: $rang4')</script>";
echo "<script>alert('Rang5: $rang5')</script>";
echo "<script>alert('Rang6: $rang6')</script>";
echo "<script>alert('Rang7: $rang7')</script>";
}
第一个问题:正如你在我上面的脚本中看到的那样,我使用了"helper:'clone'",但是
正在移动带有".DraggedItem"类的图像,这不是重点.应该在7个div之间移动和替换图像.但它们应该从原始列表克隆(所以我可以使用相同的图标两次,例如)
第二个问题:我为每个div都有一个隐藏的输入,它们必须包含被
删除图像的id,所以我可以将它们插入到数据库.我只想说我在Div1上放了一个图像(#rang1),然后将图像移动到Div4(#rang4),图像的id保留在Div1的隐藏输入中,不会被删除/更新.当我在div上放置新图像时,如何确保id也会更新？
第三个问题:当我从主列表中删除图像时如何进行检查,如果已有图像,旧图像将被删除并被新图像替换？
第四个问题:在两个图像之间切换的最佳方法是什么？
如果你可以帮助我解决任何这些问题,将不胜感激!如果不解决这些问题我就无法走得更远,我真的需要专家的帮助.
我将从对代码进行一些重构开始，以摆脱所有复制粘贴代码。Droppables 可以通过一次调用来初始化，将回调中的每个输入引用为$(this).next('input').
接下来，我不会将图像直接克隆到删除的字段中，以避免 ID 重复。我会在槽内创建具有不同类的新图像元素，因为它们在槽之间移动时必须表现不同，在我的示例中没有半透明助手。
因此，在我的示例中，您的DraggedItem图像没有任何变化。我将DropZone类添加到每个可删除插槽中，以允许通过单个调用进行初始化。
当图像被删除时，我会检查它来自哪里。如果它来自库，则创建一个新的图像元素，将其设置src为与原始图像元素匹配，并将data-id数据属性设置为原始项目的 ID，以便在需要时进行跟踪。作为最后一步，我添加了一个DroppedItem类，并使其成为另一种无需助手即可拖动的类。
如果掉落的物品是 a DroppedItem，即来自不同的槽，只需交换容器的内容和相应的input盒子值。
超文本标记语言
<table>
<tr>
<td>
<div id="rang1" class="DropZone"></div>
<input type="text" value="" id="rang1input" name="rang1value" />
</td>
<td>
<div id="rang2" class="DropZone"></div>
<input type="text" value="" id="rang2input" name="rang2value" />
</td>
<td>
<div id="rang3" class="DropZone"></div>
<input type="text" value="" id="rang3input" name="rang3value" />
</td>
<td>
<div id="rang4" class="DropZone"></div>
<input type="text" value="" id="rang4input" name="rang4value" />
</td>
<td>
<div id="rang5" class="DropZone"></div>
<input type="text" value="" id="rang5input" name="rang5value" />
</td>
<td>
<div id="rang6" class="DropZone"></div>
<input type="text" value="" id="rang6input" name="rang6value" />
</td>
<td>
<div id="rang7" class="DropZone"></div>
<input type="text" value="" id="rang7input" name="rang7value" />
</td>
</tr>
</table>
<img id="img1" class="DraggedItem" src="http://dummyimage.com/50x50/000/fff&text=1" />
<img id="img2" class="DraggedItem" src="http://dummyimage.com/50x50/000/fff&text=2" />
<img id="img3" class="DraggedItem" src="http://dummyimage.com/50x50/000/fff&text=3" />
<img id="img4" class="DraggedItem" src="http://dummyimage.com/50x50/000/fff&text=4" />
<img id="img5" class="DraggedItem" src="http://dummyimage.com/50x50/000/fff&text=5" />
<img id="img6" class="DraggedItem" src="http://dummyimage.com/50x50/000/fff&text=6" />
<img id="img7" class="DraggedItem" src="http://dummyimage.com/50x50/000/fff&text=7" />
CSS
table { margin-bottom: 50px; }
td div { width: 50px; height: 50px; border:1px solid silver; margin-bottom: 10px;}
td input { width: 50px; }
JavaScript
$('.DraggedItem').draggable({
helper: 'clone',
cursor:'move',
opacity: 0.7
});
var droppedOptions = {
revert: 'invalid',
cursor: 'move'
};
$('.DropZone').droppable({
drop: function(ev, ui) {
var dropped = ui.draggable;
var droppedOn = $(this);
if(ui.draggable.is('.DroppedItem')) {
// Item is dragged from another slot, swap images
var draggedFrom = ui.draggable.parent();
droppedOn.find('img').appendTo(draggedFrom);
dropped.css({ top:0, left:0 }).appendTo(droppedOn);
var temp = '' + droppedOn.next('input').val();
draggedFrom.next('input').val(temp);
droppedOn.next('input').val(dropped.data('id'));
} else {
// Item is dragged from library
droppedOn
.empty() // Delete already dropped items
.next('input')
.val(dropped.attr('id'));
$('<img class="DroppedItem">')
.attr('src', dropped.attr('src'))
.data('id', dropped.attr('id'))
.draggable(droppedOptions)
.appendTo(droppedOn);
}
}
});
请注意，在我的示例中，我将输入类型更改为text显示，只需将其更改回“hidden一切就绪”即可。