jquery html在拖放时复制

Posted 2023-05-08

【中文标题】jquery html在拖放时复制

【英文标题】：jquery html duplicating on drag and drop

【发布时间】：2021-11-14 07:46:20

【问题描述】：

我正在使用 jQuery 并使用拖放功能。我的图像不断重复，我不知道为什么。任何帮助都会很棒。我很确定我的问题是：

$('#' + seat).append('<div class="studentCard" id="' + id + '"><img class="studentImage" src="Images/' + id + '.jpg" style="height:150px; width:150px;" />' + student + '</div>');


           

这是我的功能：

$('.seat').droppable(        
    drop: function (event, ui) 
        var seat = $(this).attr('id');
        var id = $(ui.draggable).attr('id');
        var student = $(ui.draggable).html();
        $.ajax(
            success: function () 
                if ($('#' + seat + '> div').length > 0) 
                    alert('Desk already occupied');
                
                else                    
                    $(ui.draggable).remove();
                    $('#' + seat).append('<div class="studentCard" id="' + id + '"><img class="studentImage" src="Images/' + id + '.jpg" style="height:150px; width:150px;" />' + student + '</div>');
                    $('div#' + id).draggable(
                        helper: 'clone'
                    );                        
                
            
        );
    
);

【问题讨论】：

append() 旨在添加新内容。如果您多次调用它，则会导致重复的内容。您可以检查该图像是否已经存在而不是调用append()。你想创造什么行为？

为每个新图像使用不同的 id 怎么样？ （尝试在 id 末尾添加一个数字计数器，以便获得 id1、id2 等以使 id 唯一）...

或者根本不使用 ID - 从不需要递增 ID。 $("..").append("div id="+(n+1)... $("div#" + id).event 可以是 $("div").appendTo("..").event

@freedomn-m 只是一个注释，运行两次会重新初始化 droppable，drop 事件只会运行一次。

请提供一个最小的、可重现的示例：***.com/help/minimal-reproducible-example 可拖动的帮助器可能仍在出现，当您追加时，您并没有删除您希望删除的所有项目。

【参考方案1】：

考虑以下示例。您也可以考虑改用 Sortable。

$(function() 
  function moveStudent(source, target) 
    $(target).append($(".student", source).detach());
  
  $(".student").draggable(
    helper: "clone",
    revert: "invalid",
    zIndex: 100
  );
  $(".seat").droppable(
    accept: function() 
      if ($(this).children().length == 0) 
        return true;
      
      return false;
    ,
    drop: function(event, ui) 
      moveStudent(ui.draggable.parent(), this);
    
  );
);

.seat 
  width: 150px;
  height: 150px;
  float: left;
  margin: 10px;


.student 
  display: inline-block;
  width: 140px;
  height: 140px;
  border: 1px solid #CCC;
  position: relative;
  background-color: #FFFFFF;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin: 5px;


.studentName 
  position: absolute;
  top: 120px;
  left: 5px;
  font-size: 11pt;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="seat-1" class="seat ui-widget-header">
  <div id="student-1" class="student" style="background-image: url('https://i.imgur.com/QjxuZB5.png');" data-student-id="1001">
    <div class="studentName">Thomas</div>
  </div>
</div>
<div id="seat-2" class="seat ui-widget-header">
  <div id="student-2" class="student" style="background-image: url('https://imgur.com/Gvmj4y5.png');" data-student-id="1002">
    <div class="studentName">Trinity</div>
  </div>
</div>
<div id="seat-3" class="seat ui-widget-header">
</div>
<div id="seat-4" class="seat ui-widget-header">
</div>

您可以使用.detach()，而不是创建新元素，更轻松地将原来的可拖动项移动到新的拖放区。

有时最好使用accept 选项来确定一个droppable 是否应该接受一个项目。此选项允许使用函数：

函数：为页面上的每个可拖动对象调用的函数（作为第一个参数传递给函数）。如果应接受可拖动对象，该函数必须返回 true。

查看更多：https://api.jqueryui.com/droppable/#option-accept

这允许您重新排列项目而无需堆叠。