html - jquery html在拖放时复制

问题描述

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

标签： htmljqueryjquery-ui

考虑以下示例。您也可以考虑使用 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()您可以使用原始可拖动项目并将其更轻松地移动到新放置区域，而不是创建新元素。

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

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

这使您可以重新排列项目而无需堆叠。

html - jquery html在拖放时复制

问题描述

解决方案

推荐阅读