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>

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

jQuery sortable images that is droppable on separate containers

html

javascript

jquery

jquery-ui

jquery-ui-sortable