On a web page, I want to display a small div with text in it that is cut off and displayed with ellipses and when there is a mouse-over it should expand to a larger size such that all the text is visible. I then want to be able to use jqueryui drag and drop to move the text box onto a grid. When it is being dragged and placed, I want it to be the small size again.
I have attempted to do this like so:
Mouseover function:
$(function() {
$( ".ui-widget-content" ).mouseover(function(){
$(this).css("width", "200px");
$(this).css("height", "200px");
}).mouseout(function(){
$(this).css("width", "100px");
$(this).css("height", "40px");
})
})
Draggable function:
$(function() {
$( ".ui-widget-content" ).draggable({ snap: "td.chart:not(:first-child)", snapMode: "inner", revert: "invalid", snapTolerance: 40, stack: ".ui-widget-content",
drag: function( event, ui ) {
$(this).css("width", "100px");
$(this).css("height", "40px");
}
});
});
Droppable function:
$(function() {
$( "td.chart:not(:first-child)" ).droppable({
accept: ".ui-widget-content",
drop: function( event, ui ) {
$("#" + ui.draggable.attr("id") ).css("background-color","#D7F970");
}
});
});
Div that is getting dragged and dropped:
Lorem Ipsum
I thought that by using the above, when someone went to drag the div, first the mouse over would be triggered, enlargening the div, then the dragstart would shrink it and it would be fine. However, I am placing it on a table (see selector "td.chart:not(:first-child)" in droppable function), and while it works for the first three rows of the table, the div no longer snaps and gets dropped on the fourth and fifth rows. This problem does not occur if I remove the mouse-over function. Anyone understand what is going on here?
It would maybe help to take a look at your html.
It's just a hunch but maybe it's only a matter of the size of your draggable being too big and being over more than one droppable item.
I would advise trying to change the tolerance of your droppable element to see if it helps :
$( ".selector" ).droppable({ tolerance: "pointer" });
jQuery Documentation states :
Tolerance specifies which mode to use for testing whether a draggable is 'over' a droppable. Possible values:
fit: draggable overlaps the droppable entirely
intersect: draggable overlaps the droppable at least 50%
pointer: mouse pointer overlaps the droppable
touch: draggable overlaps the droppable any amount
Related
I want to use jQuery UI Draggable Module and Position Widget simultaneously to create Responsive content.
However, I could not find any usage examples. I've created a simple demo => jsfiddle.net/1ecg2jnc
The problem is; How do I update the offset of the elements when I drag.
<div class="element"
data-x="right"
data-y="top"
data-offset-x="-25"
data-offset-y="+45" >Draggable Element</div>
You can attach a listener to the drag event which updates your offsets. Something like this:
$(this).draggable({
containment: "#zone",
cursor: 'move',
drag: function(event, ui) {
$(event.target).data('offset-x', "+" + ui.offset.left);
$(event.target).data('offset-y', "+" + ui.offset.top);
}
});
Is it possible to delay the jQuery UI drag and drop plugins from being initialized until a movement or click is made? Not sure if this is possible. I have a ton of cells using the drag and drop, like an Excel grid, and performance isnt great.
I went this route and it seems to work.
$.fn.liveDraggable = function (opts) {
this.one("mouseover", function () {
if (!$(this).data("init")) {
$(this).data("init", true).draggable(opts);
}
});
return this;
};
You could use either delay or distance.
$( ".selector" ).draggable({ delay: 300 });
$( ".selector" ).draggable({ distance: 10 });
From the API documentation:
Delay
Time in milliseconds after mousedown until dragging should start. This
option can be used to prevent unwanted drags when clicking on an
element.
Distance
Distance in pixels after mousedown the mouse must move before dragging should start. This option can be used to prevent
unwanted drags when clicking on an element.
Update:
To keep a more standard functionality and only initialize draggable when needed, try using a hover function like so:
Working Example
$('div').hover(function () {
$(this).addClass('selector');
$(".selector").draggable({
//options
});
},
function () {
$('div').removeClass('selector');
});
I have multiple boxes in a row and I have added option to resize these boxes using jQuery UI.
You can find the code on JsFiddle: http://jsfiddle.net/alokjain_lucky/ZbTem/
When I resize one box it is pushing the next one to create space. How can I restrict the boxes to push the next box out from the parent?
My jQuery Code:
$(function() {
$( ".resizeable" ).resizable({
containment: "parent",
handles: "e, w",
});
$( ".resizeable" ).resizable( "option", "alsoResize", $(this).siblings().not(this) );
});
I have a sortable and droppable list, and also a separate set of draggables:
ul.sortable
li.droppable
li.droppable
li.droppable
/ul
ul
li.draggable
li.draggable
li.draggable
/ul
I apply a hover class on the droppables:
$(".droppable").droppable({ hoverClass: "hover" });
The hover is supposed to be a visual cue for the user, telling him that a draggable can be dropped onto a droppable.
The problem is that the hover class is also applied when a droppable is hovered by a sortable element as well. The visual cue is, in this case, totally wrong.
Here's a fiddle illustrating the issue (drag the draggables over the sortables, reorder the sortables): http://jsfiddle.net/TWXeH/
How do I make the hover class work only when there's a draggable over a droppable, but not with sortables?
You're looking for the accept option
$(".droppable").droppable({
hoverClass: "hover",
accept: ".draggable"
});
I am having trouble setting the containment value of the jqueryUI draggable function when using the [x1,y1,x2,y2] format. Here is the js:
<script type="text/javascript">
//slideTest.js
$(document).ready(function(){
$('.slideMin').each(function(){
$(this).draggable({
containment: [$(this).parent().offset().left,$(this).parent().offset().top,$(this).next('div').offset().left,$(this).parent().offset().top]
});
});
</script>
And the html which the script is interacting with:
<div class="slideBar">
<div class="slideMin"></div>
<div class="slideMax"></div>
</div>
I am trying to set the drag containment (of the slideMin div) based on the offset().left of the next div, in this case (slideMax).
In other words, I want the draggable behavior to stop (for the slideMin div) when it reaches the left of the next (slideMax) div.
The x1 seems to be working as the drag is stopping at the position defined, however, it is overlapping and extending beyond the next div, which i do not want to happen. There must be something wrong with how I am setting the x2 value but I am not sure what it is.
Any advice?
Figured it out... I had two divs, both draggable. The first div was to stop when it reached the next div. The above code accomplished this until I was to drag either div: once either div was dragged, the draggable range for the other div was not updating, therefore, I received the error where the draggable range was overlapping the other div. To fix it, I had to re-initiate and set the draggable range for the other div within the draggable function for the div that was being moved.
The new code goes something like this:
$(this).draggable({
containment: [$(this).position().left, $(this).position().top, $(this).next().position().left - $(this).width()+4, $(this).position().top],
drag: function(e){
$(this).next().draggable({
containment: [parseFloat($(this).position().left) + parseFloat($(this).width())-4, $(this).next().position().top, parseFloat($(this).parent().position().left) + parseFloat($(this).parent().width())-3, $(this).next().position().top]
});
}
});
$(this).draggable({
containment: [parseFloat($(this).prev().position().left) + parseFloat($(this).prev().width())-4, $(this).position().top, $(this).position().left, $(this).position().top],
drag: function(e){
$(this).prev().draggable({
containment: [$(this).parent().offset().left-$(this).prev().width()+5, $(this).prev().position().top, $(this).position().left - $(this).prev().width()+4, $(this).prev().position().top]
});
}
});
PS, the numbers -3 -4 +5, etc. were to add spacing for the handles on my draggable divs (4px handles), if you don't have handles you don't need the extra -3 -4 +5 portions of the code.