javascript - 更新id拖放定位问题

标签 javascript php jquery html drag-and-drop

你好，我的 stackoverflow friend 们。我今天遇到了一些问题，需要你的帮助来解决。如果您能提供任何帮助，我们将不胜感激!因为我真的需要完成这个项目。

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 都有一个隐藏的输入，它们必须包含
删除图像，以便我可以将它们插入数据库。假设我将图像放在 Div1 (#rang1) 上，然后将图像移动到 Div4 (#rang4)，图像的 ID 保留在 Div1 的隐藏输入中，不会被删除/更新。当我将新图像放到 div 上时，如何确保 ID 也得到更新？

第三个问题:当我从主列表中删除一个图像时，如何检查如果已经有一个图像，旧图像被删除并被新图像替换？
enter image description here

第四个问题:在两张图片之间切换的最佳方式是什么？
enter image description here


如果您能帮助我解决这些问题中的任何一个，将不胜感激!!如果不解决这些问题，我就无法走得更远，我真的需要专家的帮助。

最佳答案

我会先对代码进行一些重构，以摆脱所有复制粘贴代码。 Droppables 可以通过一次调用初始化，将回调中的每个输入引用为 $(this).next('input')。

接下来，我不会将图像直接克隆到放置的字段中以避免 ID 重复。我会在插槽内创建具有不同类的新图像元素，因为它们在插槽之间移动时必须表现不同，在我的示例中没有半透明助手。

所以在我的示例中，您的 DraggedItem 图像没有任何变化。我将 DropZone 类添加到每个可放置插槽中，以允许通过一次调用进行初始化。

当图像被丢弃时，我检查它来自哪里。如果它来自库，则创建一个新的图像元素，将其 src 设置为与原始元素匹配，并将 data-id 数据属性设置为原始项目的 ID 以进行跟踪如果需要的话。作为最后一步，我添加了一个 DroppedItem 类，并使其成为另一种无需助手的可拖动对象。

如果掉落的元素是 DroppedItem，即来自不同的插槽，只需交换容器的内容和相应的 input 框值即可。

HTML

<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);
        }
    }
});

JS Fiddle example

请注意，在我的示例中，我将输入类型更改为 text 以进行显示，只需将其更改回 hidden 即可。

关于javascript - 更新id拖放定位问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29659431/

上一篇：javascript - 叠加的 div 之间的间距，不影响宽度

下一篇：javascript - 如何 $setdirty 到单个输入

相关文章：

Jquery UI Datepicker 向 minDate 和 maxDate 添加月份

javascript - 如何在angularjs中使用ng-repeat在css中动态设置表格列的宽度

javascript - 为什么 typeof 在这个 for 循环中等于一个字符串？

javascript - 使用jsPDF和jsPDF autotable创建pdf时出现空行

PHP嵌套foreach

php - 插入具有一对多关系的数据

javascript - Overlay div 链接到相同的相关 div 目标地址

javascript - 如何在子测试中访问 Jest 测试环境的类属性？

javascript - 如何在 Javascript 中修复 0.3+0.6=0.89999999999？

php - 如何在wordpress的查询中动态添加帖子数

©2024 IT工具网  联系我们