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 {
}
}
});
}
Related
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.
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".
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
Here's my fiddle: http://jsfiddle.net/challenger/u22PD/69.
Draggable and droppable are initialized this way:
$lister.find('.draggable').draggable({
stack: 'div'
});
$('#insert-editor .droppable-target').droppable({
drop: function(event, ui) {
var $this = $(this);
$this.html(ui.draggable);
}
});
It is only possible to drag .darggable item over #image-lister div. How do I drop a .draggable item onto the droppable-target?
Also how to keep the draggable item after it's been dragged-dropped to the target?
Found a solution there: jQuery Draggable and overflow issue
Changed my code to this:
$lister.find('.draggable').draggable({
scroll: false,
helper: 'clone',
start: function() {
$(this).hide();
},
stop: function() {
$(this).show()
}
});
Here's the result: http://jsfiddle.net/challenger/u22PD/91
The only thing that doesn't satisfy me is that you still can see as a draggable item goes under the hidden part of the parent division when dragged. Maybe you know how to solve this?
Remove overflow: auto; from #image-lister
Try this code:
DEMO
#image-lister {
position: relative; max-width: 1920px; min-width: 300px; margin: 0 auto;
height: 530px;
overflow: auto; /*remove this */
background: #ddd;
background: #555;
z-index: 2;
padding: 10px;
padding-bottom: 0;
}
I'm trying to have the user drag and drop the items. When an item is lifted from its spot, a gray dashed box needs to appear instead. As the item moves near another spot the boxes move to open up a target (gray dashed box) for the item to be dropped. (see image)
Here is my current jQuery.
$(function() {
$( "#sortable" ).sortable({
revert: true
});
$( "#draggable" ).draggable({
connectToSortable: "#sortable",
revert: "invalid",
cursor: "move"
});
$( "ul, li" ).disableSelection();
});
// when the DOM is ready:
$(document).ready(function () {
// find the div.fade elements and hook the hover event
$('div.fade').hover(function() {
// on hovering over, find the element we want to fade *up*
var fade = $('> div', this);
// if the element is currently being animated (to a fadeOut)...
if (fade.is(':animated')) {
// ...take it's current opacity back up to 1
fade.stop().fadeTo(250, 1);
} else {
// fade in quickly
fade.fadeIn(250);
}
}, function () {
// on hovering out, fade the element out
var fade = $('> div', this);
if (fade.is(':animated')) {
fade.stop().fadeTo(3000, 0);
} else {
// fade away slowly
fade.fadeOut(500);
}
});
});
You can try following...
CSS:
.dashed-placeholder {
border: 2px dashed #999;
width: 217px;
height: 320px;
background: #ccc;
margin: 10px 0px 50px 0px;
padding: 8px 0px 10px 6px;
}
JS:
$("#sortable").sortable({
revert: true,
placeholder: "dashed-placeholder"
});
Here's Demo Fiddle