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

Question

我有一个简单的 div 元素，我想将它拖到图像上，但是当我将 div 元素拖到图像上时，它不会在那里显示。1.我想将元素的副本拖到图像上我尝试了不同的建议，但没有得到我想要的结果。1. 我使用了 helper:'clone'--> 当我使用 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>with position:absolute 并使其适合容器，droppable <div>然后它将是这样的，还要注意我删除了helper.clone.

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

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