jquery html在拖放时复制

Question

我正在使用 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'
                    });                        
                }
            }
        });
    }
});

Answer 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

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