I'm having some trouble with JQuery. I want to clone an attribute or tag that is dragged from one div1 to another div2, which is working fine. But the issue arises when I drag or move the position of an existing tag on div2, then the cloning process starts.
I only want the cloning to occur when I drag from div1 to div2. Can someone please point out where I am going wrong and what needs to be corrected?
This is the content of div1
<div class="md-card scroll-style">
<div class="draggable-items">
<img class="img_style" src="tools_icon/ic_text_format.svg" data-toggle="tooltip" title="Text Input" data-placement="bottom">
<div id="text_field_clone" class="draggable_items_hide">
<input type="text" name="text_field">
</div>
</div>
</div>
This is div2
<div class="droppable_box_style scroll-style" id="droppable-box">
</div>
This is the JQuery Code
<script type="text/javascript">
$(document).ready(function () {
$(".draggable-items").draggable({
grid: [ 20, 20 ],
appendTo: '#droppable-box',
containment: "window",
cursor: 'move',
revertDuration: 100,
revert: 'invalid',
helper: 'clone'
});
$("#droppable-box").droppable({
accept: ".draggable-items",
drop: function (event, ui){
ui.helper.clone().appendTo('#droppable-box');
$("#droppable-box > .draggable-items").find(".img_style").hide();
$("#droppable-box > .draggable-items").find("#text_field_clone").removeClass("draggable_items_hide").addClass("show").resizable();
$("#droppable-box > .draggable-items").draggable();
}
});
// $('[data-toggle="tooltip"]').tooltip();
});
</script>
My layout looks like this https://i.sstatic.net/DprUV.png