如何使用 jquery 将元素的副本拖到图像上？

Question

我有一个简单的 div 元素，我想将其拖到图像上，但是当我将 div 元素拖到图像上时，它不会显示在那里。 1. 我想将元素的副本拖到图像上

我尝试了不同的建议，但没有得到我想要的结果。 1. 我使用了助手：'clone'
--> 当我将克隆与 draggable 一起使用时它正在制作副本，但它仍然没有在图像标签上显示元素。

这里我提到了我的简单代码，请检查。并建议我实现我的结果。

@{
    ViewBag.Title = "Draggable";
    Layout = null;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div>
    <div class="ui-visual-focus draggable" style="width:100px;">
        Textbox
    </div>
    <br />
    <div class="droppable">
        <img src="~/Documents/employeeFormImage.png" />
    </div>
</div>

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

    $(document).ready(function () {

    });

    $(function () {
        $('.draggable').draggable({
            revert: "invalid",
            stack: ".draggable",
            helper: 'clone'
        });
        $('.droppable').droppable({
            accept: ".draggable",
            drop: function (event, ui) {
                var droppable = $(this);
                var draggable = ui.draggable;
                // Move draggable into droppable
                draggable.clone().appendTo(droppable);
            }
        });
    });
</script>

Answer 1

如果我解决了你的问题，那么你可以通过 CSS 中的小技巧来实现这一点，你可以将 <img> 与 position:absolute 结合起来并使其适合容器 droppable <div> 那么就会是这样的，还要注意我去掉了 helper.clone.

更新：可调整大小的拖动，请注意，我为 .ui-visual-focus <div> 添加了 css 并且我强制执行绝对位置，这样它就不会下推可放置区域。

$(function () {
  $('.draggable').draggable({
    revert: "invalid",
    stack: ".draggable"
  }).resizable();
  $('.droppable').droppable({
    accept: ".draggable",
  });
});

img {
  width: 300px;
  height: auto;
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
}

.ui-visual-focus {
  position:absolute !important;
  width: 100px;
  height: 30px;
}

.image-container {
  top: 20px;
  position:relative;
  width:300px;
  max-height: 200px;
  border:1px solid;
  height:200px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div>
    <div class="ui-visual-focus draggable" style="width:100px;">
        Textbox
    </div>
    <br />
    <div class="image-container droppable">
        <img src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1652&q=80" />
    </div>
</div>

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

如何使用 jquery 将元素的副本拖到图像上？

How to drag copy of element over the image using jquery?

javascript

jquery

drag-and-drop

jquery-ui

jquery-ui-draggable