CODEWITHSUNDEEP
javascriptjqueryjquery-uidrag-and-dropjquery-ui-draggable
Harry R
Harry R

Reputation: 79

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

I have a simple div element which I want to drag over the image but when I am dragging that div element over the image then it's not displaying there. 1. I want to drag copy of element over the image

I have tried with different suggestions but I am not getting result which I want. 1. I have use helper:'clone'
--> It's making copy when I am using Clone with draggable but still it's not showing element over the image tag.

here I have mentioned my simple code so please check it. And suggest me to achieve my result.

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

Upvotes: 1

Views: 1263

Answers (1)

ROOT
ROOT

Reputation: 11622

If I got your issue right, then you can achieve this with small trick in CSS, you can have the <img> with position:absolute and make it fit the container droppable <div> then it will be something like this, also note that I removed helper.clone.

Update: draggble with resizable, note that I added css for .ui-visual-focus <div> and I enforced position absolute so that it will not push down the droppable area.

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

Upvotes: 1

Related Questions