We Keep Coding

jQuery-UI: Drag and Drop sometimes not working eventhough mouse is inside drop area

I created a list from which items can be dragged and dropped into items of another list. The problem is sometimes when the item is dragged at the edge and dropped on the edge of the droppable item nothings happens eventhough the mouse was inside the droppable item. Is there a way to improve this?
Fiddle example grab the draggable item's right edge and drop it on the droppable items left edge. Eventhough the mouse is clearly inside the droppable element the console.log does not register
jquery
$( ".left li" ).draggable({
helper: 'clone'
});
$( ".right li" ).droppable({
accept: '.left li',
drop: function(ev, ui){
console.log('dropped inside right li')
}
});
html
<ul class="left">
<li>drag1</li>
<li>drag2</li>
<li>drag3</li>
<li>drag4</li>
<li>drag5</li>
</ul>
<ul class="right">
<li>drop1</li>
<li>drop2</li>
<li>drop3</li>
<li>drop4</li>
<li>drop5</li>
</ul>
css
.left {
float:left;
}
.left li {
width: 100px;
height: 30px;
border: 1px solid black;
}
.right {
float:right;
}
.right li {
width: 100px;
height: 30px;
border: 1px solid black;
}

The issue, I suspect, is with your droppable. You're making each list item a droppable instead of its parent.
http://jsfiddle.net/Twisty/1ofa25zx/
JavaScript
$(document).ready(function() {
function log(str) {
$("#log").prepend("<div>" + str + "</div>");
}
$(".left li").draggable({
helper: 'clone'
});
$(".right").droppable({
accept: '.left li',
drop: function(ev, ui) {
log('Drop on: ' + $(this).attr("class"));
var item = $("<li>", {
class: "dropped"
}).html(ui.helper.text()).appendTo($(this));
}
});
});
As you can see here, drop is triggered when an item lands on the ul.right. If you want, you can also adjust the tolerance.

Strange droppable Hover-Effect with draggable Helper

I'm testing around with jQuery draggables and droppables and have a question about the hover behaviour of droppable and clones of a draggable.
The documentation says that the draggable item has to overlap the droppable at least 50% to fire the over-event (default tolerance). This works exactly like described if I drag the item itself.
If I drag a clone of the item, the 50% rule doesn't work. In this case the clone has to overlap the droppable quite 100% if I'm dragging vertically from the top. If I'm dragging the clone from the left side, the hover-event will fire very early at 10%.
How does this come up?
$("#eins").draggable({
helper: "clone",
opacity: 0.7,
drag: function(event,ui) {
$(ui.helper).addClass("clone")
},
stop: function (event, ui) {
console.log("Dragging stoped")
}
})
$("#zwei").droppable({
classes: {"ui-droppable-hover": "draggableHover"},
tolerance: "intersect",
over: function(event, ui) {
console.log("hover")
},
drop: function (event, ui) {
console.log("dropped")
}
})
#eins, .clone {
background: coral;
height: 100px;
width: 100px;
margin: 0px;
}
#zwei {
background:lightgreen;
height:100px;
width: 100px;
margin: 0px;
}
.draggableHover {
background: rgb(230, 250, 230) !important;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<div id="eins">
eins
</div>
<div id="zwei">
zwei
</div>

Solution: class="eins" intead of id="eins".

Drag and drop button inside textarea using JQUERY

Hii Everyone,
Below is my sample screenshot.
And for understanding I will add one more picture.
I want to give the input like paragraph and number of blanks and the below choices. Initially I will choose number of blanks needed for paragraph. Based on the choice buttons it will be visible like choice 1,2 etc.
After that I will drag and drop that button inside the paragraph textarea so it will take that position as first blank similarly for any number of choices. For this scenario I tried so many different things, like below link If I drag and drop it will drop either in initial position of paragraph or else at end of paragraph. I want to drop at any position inside the paragraph. I cant fix this issue, so I'm looking for help.

HTML
<ul id="left-pane">
<li>
<div align="center" style="width:100px;border:3px solid #ddd; padding:5px;cursor:move;background:#eee;">Drag Me</div>
</li>
</ul>
<ul id="right-pane"></ul>
JS
$("#left-pane li").draggable({
containment: '#gbox',
cursor: 'move',
helper: 'clone',
scroll: false,
connectToSortable: '#right-pane',
appendTo: '#right-pane',
start: function () {},
stop: function (event, ui) {}
}).mousedown(function () {});
$("#right-pane").sortable({
sort: function () {},
placeholder: 'ui-state-highlight',
receive: function () {},
update: function (event, ui) {}
});
$("#right-pane li").live('dblclick', function () {
$(this).remove();
})
$("#right-pane").droppable({
accept: "#left-pane li",
accept: ":not(.ui-sortable-helper)",
drop: function (event, ui) {
if ($(ui.draggable).find('.single-item').length == 0)
{
$(ui.draggable).html("<div align=\"center\" style=\"width:100px;border:3px solid #ddd; padding:5px;cursor:move;background:#eee;\">Drag Me</div>");
}
}
});
$("#left-pane").droppable({
accept: "#right-pane li",
drop: function (event, ui) {}
});
$("ul, li").disableSelection();
CSS
#left-pane {
border: 1px solid black;
min-width: 100px;
min-height: 100px;
}
#right-pane {
border: 1px solid black;
min-width: 100px;
min-height: 100px;
}
.single-item {
border:2px solid #ddd;
background:#fff;
margin:30px;
padding:10px;
}
Here is similar fiddle to your problem. Check out below fiddle
Also Check out this JSBin Demo

How to use image as a droppable element inside div

I have an image inside div which acts as droppable.
I want to call drop function when dragging element and hover over the image.
I did it but drop function is not getting called smoothly.
Below is my html code
<div id="divRecycle"><img id="imgRecycle" src="Images/RecycleBin.jpg"/></div>
Below is the css used.
.recycle-hover {
padding: 10px;
border: 2px dashed orange;
}
Below is the javascript code
function MakeRecycleBinDivDroppable() {
$("#imgRecycle").droppable({
accept: ".sections,.cart-item",
hoverClass: 'recycle-hover',
helper: 'clone',
cursor: 'move',
drop: function (event, ui) {
//check if the draggable element is a section or only a product.
if ($(ui.draggable).hasClass("sections")) {
//it is a section, we will delete the section and its products
} else {
}
}
});
}

Containment option for a draggable

I specify the containment option for a draggable to be 'document' but the draggable element cannot be dragged outside of the container. This is only possible if I specify a very high z-index. This results in a strange display (draggable floats over other page elements). What must I specify to have the draggable divs from the editdiv container be draggable to the editdiv2 container?
$(function() {
$( "#editdiv" ).resizable();
$( "#editdiv" ).draggable();
$( "#editdiv" ).draggable("option", "handle", '#heading');
$( "#editdiv2" ).resizable();
$( "#editdiv2" ).draggable();
$( "#editdiv2" ).draggable("option", "handle", '#heading');
$( ".comurl" ).draggable();
$( ".comurl" ).draggable("option", "handle", '#dhandle');
$( "div.droppable" ).droppable({
drop: function( event, ui ) {
var $item = ui.draggable;
$item.fadeOut(function() {
$item.css( {"left":"", "top":"", "bottom":"", "right":"" }).fadeIn();
});
$item.appendTo( this );
}
});
$( ".comurl" ).draggable({ containment: 'document' });
});
If I change the containment to 'parent' or 'window' the draggable divs in the container seem to be more constrained than if I select 'document'.
Since I thought that z-index was an issue, I set the z-index for the ui-draggable-dragging class in the css.
.ui-draggable-dragging {
z-index: 999999;
background-color: red;
}
What must I fix to be able to drag an element div, e.g. Facebook.com from the first container to the second? I have a jsfiddle at http://jsfiddle.net/gkvgn/8/. Thanks.

Had to remove overflow: hidden;
.link_drop_box{
height:80%;
/* overflow:hidden; */
}
.comdiv {
position:absolute;
padding: 0;
border: 1px solid DarkKhaki;
border-radius: 3px 3px 0px 0px;
box-shadow: inset 0px 0px 10px DarkKhaki;
/* overflow-y: hidden;
overflow-x: hidden; */
}
http://jsfiddle.net/gkvgn/10/ .