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".
Related
I am using jQuery UI rotatable to rotate my div, its working fine when my div is set to 100% zoom. When I set the zoom less then 100% or greater then 100% then its not working properly.
I want it to be perfectly rotate on zoom in or zoom out my div.
I know here we need to write few lines of code to fix zoom issue.
Here what I tried
$('#target').rotatable({
angle: false,
wheelRotate: true,
rotate: function(event, ui) {
},
start: function(event, ui) {
},
stop: function(event, ui) {
},
});
Consider the following example:
https://jsfiddle.net/Twisty/q2Lgh0st/12/
HTML
<div class="slide"></div>
<div class="container">
<div id="target">Rotate me!</div>
</div>
CSS
.ui-rotatable-handle {
height: 16px;
width: 16px;
cursor: pointer;
background-size: 100%;
bottom: inherit;
left: 0;
right: 0;
top: -21px;
margin: auto;
position: absolute;
}
.container {
transform: scale(0.5);
}
#target {
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 50px;
left: 200px;
}
JavaScript
$(function() {
$(".slide").slider({
min: 0,
max: 2,
step: 0.1,
value: 0.5,
slide: function(e, ui) {
console.log("Slide", ui.value);
$(".container").css("transform", "scale(" + ui.value + ")");
}
});
$('#target').rotatable({
// Callback fired on rotation start.
start: function(event, ui) {},
// Callback fired during rotation.
rotate: function(event, ui) {},
// Callback fired on rotation end.
stop: function(event, ui) {},
// Set the rotation center
});
});
In regards to the zoom, please see:
The non-standard zoom CSS property can be used to control the magnification level of an element. transform: scale() should be used instead of this property, if possible. However, unlike CSS Transforms, zoom affects the layout size of the element.
See More: https://developer.mozilla.org/en-US/docs/Web/CSS/zoom
The last bit is what was most likely throwing off your Rotatable. Switching to the transform, there is no such issue found.
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.
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
When moving, the movable div displays under another block. How to make this div appear on top of all the other blocks?
<div class="main-container">
<div class="some-container"></div>
<div class="group-container"></div>
</div>
$('.group-container').draggable({
containment: '.main-container'
});
I have this problem because class="some-container":
CSS
position: absolute;
right: 25px;
top: 89px;
width: 260px;
z-index: 1150;
height: 83%;
overflow-x: hidden;
overflow-y: scroll;
How can I fix this, maybe cloning?
Added:
I trying like this:
$('.group-container').draggable({
containment: 'window',
onDrag: myHelper,
zIndex: 9999,
stop: function(){
$(this).remove();
}
});
// Element which created after start dragging
function myHelper(event, ui){
var newGroupBlock = $(this).clone().appendTo($(".main-container"));
return newGroupBlock;
}
But it's not working. The block that I should stand after dragging stay put where I dragged him, and he disappears ...
You can use the start and stop events of the draggable to set the z-index higher/lower. Try this:
$('.group-container').draggable({
containment: '.main-container',
start: function(e, ui) {
ui.helper.css('z-index', 1200);
},
stop: function(e, ui) {
ui.helper.css('z-index', 1100);
}
});
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;
}