hello
i tried the draggable function of jquery ui:
$("div.kind_div").draggable({ cursor: 'crosshair', containment: 'document', appendTo: 'body' });
i can drag the kind_div but it remains into the outer div
I want drag it in all body of my page
how can i do?
thanks
have you tried setting containment to window ?
You need to change the overflow to none or hidden for it to work ..
also the 'outer' div must not be relative positioned ..
Related
Jump box when drag in another point how fix jump.
These are my codes here:
$('.box_reminded_pop,.boxing').draggable({
connectToSortable: ".line",
containment: '.day_table ',
});
When I remove this section all work fine but the html content of the dragged box not goes here:
$(".line").sortable({
revert: true,
});
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"
});
Using jQuery UI, I am trying to create an interface with two scrollable containers, each containing many draggable elements. The user can drag an element from one container to the other.
The dropping feature is not an issue. When dropped, the element is detached and recreated in the right place under its new parent.
My problem is that the draggable element cannot be displayed outside its container when the container has position:relative; applied, so while dragging, the element will disappear when it is moved outside the container boundaries.
This default behaviour makes sense, as normally the user would want to drag an element inside its container. As a workaround I had assumed the solution would be to use the draggable property 'appendTo', which I thought would move the element outside its container, but unfortunately this hasn't seemed to have had any effect.
DOM: (each view is scrollable and each container has position:relative and is as large as it needs to be to hold all elements)
BODY
VIEW 1
CONTAINER
DRAGGABLE ELEMENTS
VIEW 2
CONTAINER
DRAGGABLE ELEMENTS
Javascript:
$('div.card').draggable({
appendTo: 'body',
scroll: false //stops scrolling container when moved outside boundaries
});
Please see JSFiddle for a simplified explanation of the problem. I didn't want to bloat the example with droppable code, so this just illustrates the dragging issue. http://jsfiddle.net/Em7Ak/
Many thanks in advance.
I'm not sure if this will fix your exact problem, but I came across this question looking for the same answer and this is what I found.
In the options for .draggable(), pass in helper:'clone' to make a clone of the item automatically so that it can be dragged out of the container. And use appendTo:'body' to put it at the end of the <body> tag. So in my case, my options look somewhat like this, adding in revert:'invalid' to cause it to spring back if it isn't dropped somewhere valid:
jQuery(".myselector").draggable({
helper: 'clone',
revert: 'invalid',
appendTo: 'body'
});
use the "clone" helper and hide the item while dragging it and show it again on stop.
$(".removalbe-recom").draggable({
appendTo: "body",
helper: "clone",
revert: "invalid",
cursor: "move",
containment: "document",
zIndex: 10000,
scroll:false,
start: function (event, ui) {
$(this).hide();
},
stop: function (event, ui) {
$(this).show();
}
});
I had similar problem some months ago.
My need was to be able to use the auto scrolling of one big container from others
Here is my question for more details, JqueryUI, drag elements into cells of a scrolling dropable div containing large table
I found a workaround. The idea is to append the element clone to the scrollable container during the helper construction callback, then append the helper to the body using a setTimeout function after 1ms. The helper position must be mapped on the mouse position to avoid offset problem.
Here is my solution (JSFiddle seems to be down now, try it later if no code is displaying in the windows) : http://jsfiddle.net/QvRjL/134/
$('[id^="drag-"]').each(function() {
$(this).draggable({
opacity: 0.7,
cursorAt: { top: 15, left: 50 },
appendTo: 'body',
containment: 'body',
scroll: true,
helper: function(){
//Hack to append the cartridge to the body (visible above others divs),
//but still belonging to the scrollable container
$('#container').append('<div id="clone" class="cartridge">' + $(this).html() + '</div>');
$("#clone").hide();
setTimeout(function(){
$('#clone').appendTo('body');
$("#clone").show();
},1);
return $("#clone");
}
});
});
Add position:absolute to card style:
div.card {
position:absolute;
width:100px; height:50px;
border:1px black solid;
background-color:orange;
text-align:center; vertical-align:middle;
}
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.
I'm using jquery ui draggable, I do not want to let the user drag the helper over another element, how can I do this? I can not use snapMode: outer.
Thank you.
You can use the revert draggable option for that purpose.
If you set it to "valid", the drag operation will be reverted if the helper is dropped on a droppable widget. That means you only have to create such a widget around your other element:
$("#yourDraggableElement").draggable({
revert: "valid"
});
$("#yourOtherElement").droppable();