可放置在单独容器上的 jQuery 可排序图像

Question

对不起，我附上了丑陋的插图。我是初学者，所以请多多包涵。我在下面附上了一张图片。

1.) 这是页面的正常结构。 IMG 1-4 和 CONTAINER 1-4 是图像。 IMG 1-4 是可拖动的图像，然后将被拖动到 CONTAINER 1-4 的容器上。容器 1-4 不可拖动。

2.) IMG 1 被拖到 CONTAINER 1 上（插图错误！非常抱歉！现在 CONTAINER 1 应该是 IMG 1！）。所以现在 CONTAINER 1 是 IMG 1（就像一个谜题）。我还想要的是，如果它被拖动到容器的方形区域上，它会自动捕捉到容器上，并且在拖动时它具有一些突出显示颜色。然后 IMG 1 现在消失了，因为它被放置在 CONTAINER 1 上。

3.) 现在在这种情况下，图像被放置在其关联的容器中。

4.) 因此，在将图像放置在其关联的容器上之后，它也是可排序的，因为图像的顺序很重要。图像的每个顺序都有唯一的组合值。然后底部会有一个提交按钮，然后提交到服务器上。

至于现在，我才半途而废，似乎解决不了我的问题。到目前为止，这是我尝试过的：

JAVASCRIPT：

$(".drag-card-icon").draggable({ cursor: "crosshair", revert: "invalid"});
$(".drag-card-group").droppable({ accept: ".drag-card-icon",
    drop: function(event, ui) {
        var dropped = ui.draggable;
        var droppedOn = $(this);
        $(dropped).detach().appendTo(droppedOn);
    },
    over: function(event, elem) {
        $(this).addClass("over");
        console.log("over");
    },
    out: function(event, elem) {
        $(this).removeClass("over");
    }
});
$(".drag-card-group").sortable();

$(".drag-card-container-origin").droppable({ accept: ".drag-card-icon", drop: function(event, ui) {
    var dropped = ui.draggable;
    var droppedOn = $(this);
    $(dropped).detach().appendTo(droppedOn);
}});

HTML：

                      <form action="#">
                        <div class="form-group form-row drag-card-container-origin">
                            <div class="col-sm-3">
                                <img src="/images/image-1" class="drag-card-item drag-card-icon">
                            </div>
                            <div class="col-sm-3">
                                <img src="/images/image-2" class="drag-card-item drag-card-icon">
                            </div>
                            <div class="col-sm-3">
                                <img src="/images/image-3" class="drag-card-item drag-card-icon">
                            </div>
                            <div class="col-sm-3">
                                <img src="/images/image-4" class="drag-card-item drag-card-icon">
                            </div>
                        </div>
                        <div class="form-group">
                            <h6 class="text-uppercase">
                                DROP YOUR IMAGES BELOW
                            </h6>
                        </div>
                        <div class="form-group form-row drag-card-container">
                            <div class="col-sm-3">
                                <img src="/images/container-1.png" class="drag-card-item drag-card-group draggable="false">
                            </div>
                            <div class="col-sm-3">
                                <img src="/images/container-2.png" class="drag-card-item drag-card-group draggable="false">
                            </div>
                            <div class="col-sm-3">
                                <img src="/images/container-3.png" class="drag-card-item drag-card-group draggable="false">
                            </div>
                            <div class="col-sm-3">
                                <img src="/images/container-4.png" class="drag-card-item drag-card-group draggable="false">
                            </div>
                        </div>
                    </form>

非常感谢任何帮助！非常感谢！

Answer 1

不确定您是否要将.append() 和<img> 转换为另一个<img>。要么替换img，图像src，要么隐藏并附加。这是最后一种方法的示例。

$(function() {
  function countFilled() {
    return $(".filled").length;
  }

  $(".drag-card-icon").draggable({
    cursor: "crosshair",
    revert: "invalid"
  });

  $(".drag-card-group").droppable({
    accept: ".drag-card-icon",
    drop: function(event, ui) {
      var dropped = ui.draggable;
      var droppedOn = $(this);
      if (droppedOn.is(":visible")) {
        console.log("Hiding Group");
        droppedOn.addClass("hidden").hide().parent().addClass("filled");
      }
      $(dropped).detach().attr("style", "").insertBefore(droppedOn);
      droppedOn.droppable("disable");
      if (countFilled() == 4) {
        $(".hidden").droppable("destroy").remove();
        $(".drag-card-icon").draggable("destroy");
        $(".drag-card-container").sortable({
          items: "> div.col-sm-3"
        });
      }
    },
    over: function(event, elem) {
      $(this).addClass("over");
      console.log("over");
    },
    out: function(event, elem) {
      $(this).removeClass("over");
    }
  });

  $(".drag-card-container-origin").droppable({
    accept: ".drag-card-icon",
    drop: function(event, ui) {
      var dropped = ui.draggable;
      var droppedOn = $(this);
      $(dropped).detach().appendTo(droppedOn);
    }
  });
});

.drag-card-container-origin .col-sm-3,
.drag-card-container .col-sm-3 {
  display: inline-block;
  margin: 5px;
  width: 100px;
  height: 50px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<form action="#">
  <div class="form-group form-row drag-card-container-origin">
    <div class="col-sm-3">
      <img src="https://dummyimage.com/100x50/a9a9a9/ffffff&text=Image+1" class="drag-card-item drag-card-icon">
    </div>
    <div class="col-sm-3">
      <img src="https://dummyimage.com/100x50/a9a9a9/ffffff&text=Image+2" class="drag-card-item drag-card-icon">
    </div>
    <div class="col-sm-3">
      <img src="https://dummyimage.com/100x50/a9a9a9/ffffff&text=Image+3" class="drag-card-item drag-card-icon">
    </div>
    <div class="col-sm-3">
      <img src="https://dummyimage.com/100x50/a9a9a9/ffffff&text=Image+4" class="drag-card-item drag-card-icon">
    </div>
  </div>
  <div class="form-group">
    <h6 class="text-uppercase">
      DROP YOUR IMAGES BELOW
    </h6>
  </div>
  <div class="form-group form-row drag-card-container">
    <div class="col-sm-3">
      <img src="https://dummyimage.com/100x50/000000/ffffff&text=Contain+1" class="drag-card-item drag-card-group" draggable="false">
    </div>
    <div class="col-sm-3 ">
      <img src="https://dummyimage.com/100x50/000000/ffffff&text=Contain+2" class="drag-card-item drag-card-group" draggable="false">
    </div>
    <div class="col-sm-3 ">
      <img src="https://dummyimage.com/100x50/000000/ffffff&text=Contain+3" class="drag-card-item drag-card-group" draggable="false">
    </div>
    <div class="col-sm-3 ">
      <img src="https://dummyimage.com/100x50/000000/ffffff&text=Contain+4" class="drag-card-item drag-card-group" draggable="false">
    </div>
  </div>
</form>