Как перетащить копию элемента поверх изображения, используя jquery? - PullRequest
Новая
       36

Как перетащить копию элемента поверх изображения, используя jquery?

1 голос
/ 05 апреля 2020

У меня есть простой элемент 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>

1 Ответ

1 голос
/ 05 апреля 2020

Если я правильно понял вашу проблему, то вы можете добиться этого с помощью небольшого трюка в CSS, вы можете получить <img> с позицией: absolute и сделать так, чтобы он соответствовал контейнеру droppable <div>, тогда он будет что-то вроде этого, также обратите внимание, что я удалил helper.clone.

Обновление: перетаскивание с изменяемым размером, обратите внимание, что я добавил css для .ui-visual-focus <div>, и я принудительно установил абсолютную позицию, чтобы она не sh Вниз по области, в которую можно опускаться. 

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