如何使用 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 () {&nbsp; $('.draggable').draggable({&nbsp; &nbsp; revert: "invalid",&nbsp; &nbsp; stack: ".draggable"&nbsp; }).resizable();&nbsp; $('.droppable').droppable({&nbsp; &nbsp; accept: ".draggable",&nbsp; });});img {&nbsp; width: 300px;&nbsp; height: auto;&nbsp; position:absolute;&nbsp; left:0px;&nbsp; top:0px;&nbsp; z-index:-1;}.ui-visual-focus {&nbsp; position:absolute !important;&nbsp; width: 100px;&nbsp; height: 30px;}.image-container {&nbsp; top: 20px;&nbsp; position:relative;&nbsp; width:300px;&nbsp; max-height: 200px;&nbsp; border:1px solid;&nbsp; height:200px;}<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><div>&nbsp; &nbsp; <div class="ui-visual-focus draggable" style="width:100px;">&nbsp; &nbsp; &nbsp; &nbsp; Textbox&nbsp; &nbsp; </div>&nbsp; &nbsp; <br />&nbsp; &nbsp; <div class="image-container droppable">&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1652&q=80" />&nbsp; &nbsp; </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>