Question

对不起我附上的丑陋插图。我是初学者所以请耐心等待。我在下面附上了一张图片。

1。）这是页面的正常结构。 IMG 1-4和容器1-4是图像。 IMG 1-4是可拖动的图像，然后将其拖动到容器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或隐藏和追加。这是最后一个方法的一个例子。

＆＃13;

$(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);
    }
  });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

jQuery可排序的图像，可以在不同的容器上放置

1 个答案: