JS - jQuery draggable resizable multiple divs in container pushing each other - javascript

I have row with multiple columns inside it. Column width is devided by number of columns, to reach 100% of row width. User is able to update column width by dragging the edge of it. Ive been googling whole day for a script such as this one http://dobtco.github.io/jquery-resizable-columns/ but that would work on divs, not table columns, and no luck.
So i went with draggable solution, but as it does not have "containment" update during drag or after drag. I had to change draggable.js file, and it works - http://itsgoran.com/draggable/ , but i would prefer not to change draggable.js file.
I added:
o.containment = [parseInt(this.offsetParent.offset().left) + 40,0,parseInt(this.offsetParent.next().offset().left + this.offsetParent.next().width() - 40),0];
inside "_setContainment" method.
And inside _mouseStop() event, called this._setContainment();
Is there a way around this, so that i dont have to change core file ? Or some other script that would work?
Just calling _setContainment() method didnt work either.
Thanks

I managed to solve it by adding whole code to the function and running it again during "stop" callback. That way draggable is reinitiated again with updated containment. BUT i am not sure about memory usage this way ?
Here is the full code:
function init_draggable(){
$(".ui-draggable").each(function(){
var $this = $(this);
var $left = parseInt($(this).parent().offset().left) + 100,
$right = parseInt($(this).parent().next().offset().left) + 50;
console.log($left);
$(this).draggable({
axis: 'x',
refreshPositions: true,
start: function(event, ui) {
elWidth = $(this).parent().width();
nextWidth = $(this).parent().next().width();
},
drag: function(event, ui) {
$(this).parent().width( elWidth + (ui.position.left-ui.originalPosition.left) );
$(this).parent().next().width( nextWidth - (ui.position.left-ui.originalPosition.left) );
},
stop: function(event, ui) {
$(".ui-draggable").each(function(){
$(this).css({"left":'auto','right':'0'});
});
init_draggable();
},
containment: [parseInt($(this).parent().offset().left) + 40,0,parseInt($(this).parent().next().offset().left + $(this).parent().next().width() - 40),0]
});
});
}
init_draggable();

Related

Draggable containment buggs when the draggable element is rotated

I have a draggable element, which is also resizable and rotatable. These rotations are handled by CSS transformations, however, when an element is rotated, it makes the draggable feature spin out of control.
Heres a (updated) fiddle: Click me
What I think happens is that when an element is rotated, it's height and width obviously stay the same, just at an angle, however, jQuery doesn't account for the rotation, making it think that the element is in it's normal horizontal way, which results in the "bugg" shown in the fiddle above.
In a wild goose chase for the answer, I read somewhere that this would do the trick:
refreshPositions: true,
But it didn't work. Neither did destroying the draggable function on the element and then reinitiating it. Is there a way to fix this, so the containment will function normally, thus making jQuery recognise the rotation?
Thanks.
One option is to handle the containment yourself. Here is one possible way to do that.
I am using getBoundingClientRect to get the height and width of the rotated element. Using these values I can get an idea of where the dragged element resides in relation to it's parent container and force it to stay within those bounds.
var boundingContainer, boundingDraggable, prevLeft, prevTop;
$(".draggable").draggable({
classes: {
"ui-draggable-dragging": "highlight-draggable"
},
start: function(event, ui) {
boundingDraggable = ui.helper[0].getBoundingClientRect();
boundingContainer = ui.helper.closest('#draggableContainer')[0].getBoundingClientRect();
},
drag: function(event, ui) {
if(ui.offset.left <= boundingContainer.left){
if(ui.position.left < prevLeft){
ui.position.left = prevLeft;
}
}
if(ui.offset.top <= boundingContainer.top){
if(ui.position.top < prevTop){
ui.position.top = prevTop;
}
}
if(ui.offset.left+boundingDraggable.width >= boundingContainer.right){
if(ui.position.left > prevLeft){
ui.position.left = prevLeft;
}
}
if(ui.offset.top+boundingDraggable.height >= boundingContainer.bottom){
if(ui.position.top > prevTop){
ui.position.top = prevTop;
}
}
prevLeft = ui.position.left;
prevTop = ui.position.top;
}
});
Fiddle

After dragging I get incorrect coordinates of all the elements but the first

There are some div elements on my page. A user can drag any of them many times. After every dragging, I need to get new coordinates of the div that was dragged.
My code works good with div[0]: I actually get new coordinates after every new dragging.
The problem is with all the other divs, like div[1], div[2], div[10]... Script gets coordinates after the first dragging, but all the next times coordinates are still the same. They don't change.
I tried to clear variables, but that didn't help.
What could be this problem caused by? What should I check to find the solution?
I use jQuery and jQuery UI. Code:
$(document).ready(function(){
$(".rD").draggable({
stop: function(event, ui) {
// get the index of the dragged element
id = $(this).index();
// get coordinates of the dragged element
rect = document.getElementsByTagName("div")[id].getBoundingClientRect();
alert("top:" + rect.top + ", left: " + rect.left);
// clearing variables didn't help to solve the problem
delete rect;
delete id;
}
});
Try to:
alert(ui.position.top, ui.position.left)
Documentation
Whole code:
$(document).ready(function(){
$(".rD").draggable({
stop: function(event, ui) {
// Use var keyword for your local variables
// var rect = ui.helper[0].getBoundingClientRect();
alert("top:" + ui.position.top + ", left: " + ui.position.left);
}
});
});

Jquery UI Draggable + Resizable Containment issues

I'm currently trying to apply a containment to both the resize and the drag of a component. The drag accepts the containment bounds perfectly but the resize decides to break out and not follow the specified boundaries that I have set - anything i'm doing wrong here?
See the following jsFiddle (http://jsfiddle.net/cyVYq/30/);
$(".Event3").draggable({
axis: "x",
containment: "#2"
}).resizable({
axis: "x",
handles: "e, w",
containment: "#2"
})
Many Thanks,
You're trying to contain the resizable in an element that isn't its parent (#2)
Try setting the container to its parent .TimelineContainer:
$(".Event3").resizable({
axis: "x",
handles: "e, w",
containment: ".TimelineContainer"
})
Fiddle
Update:
From the JQuery-UI documentation it appears that the intended use of the containment option is to be used within the confines of a parent element. It doesn't seem possible to use this option the way you intend. Try something like:
$(".Event3").resizable({
axis: "x",
handles: "e, w",
containment: ".TimelineContainer",
resize: function(event, ui) {
// Define the dimensions of this element
var left = ui.position.left;
var width = ui.size.width;
var right = left + width;
// Define my constraints based on the element #2
var constraintLeft = $('#2').position().left;
var constraintWidth = $('#2').width();
var constraintRight = constraintLeft + constraintWidth;
// if resizable has gone further left than the constraint
if(left < constraintLeft) {
var left = parseInt($(this).css('left'));
// measure the difference between this left and the constraint left
var difference = constraintLeft - left;
// make up the difference
$(this).css('left', constraintLeft);
// make sure your width stays the same
$(this).width($(this).width() - difference);
// cancel the event
$(this).resizable('widget').trigger('mouseup');
}
// if resizable has gone further right than the constraint
if( right > constraintRight) {
// change the width to fit between the constraint right and this left
$(this).width(constraintRight - left);
// cancel the event
$(this).resizable('widget').trigger('mouseup');
}
}
});
Where you manually define the boundaries of the resizable and then you call a mouseup when the resizable has reached those boundaries. Here's the fiddle to play around with:
Fiddle

jQuery multi-draggable

Edit#1:
Since I asked this problem, I made a script which allows the elements to move together, but with problems. :(
$(this).append(
$('<div class="elem '+classes+'" style="width: 210px; height: 30px" data-modby="'+ui.draggable.attr("data-for")+'"><p>'+text+'</p></div>')
.resizable({
grid: 10,
maxHeight: 120,
maxWidth: 600,
minHeight: 30,
minWidth: 210,
containment: ".box-section"
})
.draggable({
grid: [10,10],
containment: ".box-section",
scroll: false,
helper: "original",
start: function(event, ui) {
posTopArray = [];
posLeftArray = [];
if ($(this).hasClass("r-active")) {
$(".elem.r-active").each(function(i) {
thiscsstop = $(this).css('top');
if (thiscsstop == 'auto') thiscsstop = 0;
thiscssleft = $(this).css('left');
if (thiscssleft == 'auto') thiscssleft = 0;
posTopArray[i] = parseInt(thiscsstop);
posLeftArray[i] = parseInt(thiscssleft);
});
}
begintop = $(this).offset().top;
beginleft = $(this).offset().left;
},
drag: function(event, ui) {
var topdiff = $(this).offset().top - begintop;
var leftdiff = $(this).offset().left - beginleft;
if ($(this).hasClass("r-active")) {
$(".elem.r-active").each(function(i) {
$(this).css('top', posTopArray[i] + topdiff);
$(this).css('left', posLeftArray[i] + leftdiff);
});
}
}
})
);
The actual problem is the moved elements have to stay in the containment box (called .box-section and if I have a single element it works fine. Also if i have two elements has not the same width, if i pick the sorter one and drag, I can pull out the longer of the container.
Also, if I move them fast (like a ninja) they will slip, and they won't be in the same grid they used to be.
30 percent solved since:
I'm going to make a new thingy which can drag and drop items to a box, and resize them.
My problem is that, I can't make them move together. But with some rules.
Rule one: They must move based on a 10x10px grid.
Rule two: They can't move outside their frame.
(Resize is an issue which i simply can't imagine, so I don't care about it, resize will be later)
I made a fiddle for it here: http://jsfiddle.net/9fueY/ you can see this.
In the right side, you can see inputs and a and a checkbox (and on hover a button).
The checkbox is the draggable object, drag it to the image. Now you have some text or a star appeared on the left.
If you type anything to the inputs, it refreshes the text.
OnHover the right boxes you can see a button. By clicking on it, will make a clone of the first element. Drag it inside.
If you click to a right-side box, it will glow blue. Click to two boxes on the right, makes all the two textfields glow blue in the image.
Now this is the case when i want them to move together. :D
What's your opinion, what should I do with this?
Thank you very much. - Répás
There is a plugin i developed for dragging elements together. Please do use it if it makes sense.
https://github.com/someshwara/MultiDraggable

Expand containing div when dragging an item inside it and reaching limits

My page has several items (divs) that are draggable and resizable.
My code for doing this is given below:
part.draggable(
{
containment: 'parent',
drag: function(event, ui){
partIsDragging = true
part.prev().css('top', ui.position.top - 20 ).css('left', ui.position.left )
part.prev().show()
},
stop: function(event, ui) {
partIsDragging = false
}
}).resizable({
containment: 'parent',
handles: 'ne, se, sw, nw,n,w,e,s',
stop: function() {
}
});
The html structure for these is the following:
<body>
<div id="wrapper">
<div class="draggableItem"></div>
<div class="draggableItem"></div>
<div class="draggableItem"></div>
<div class="draggableItem"></div>
</div>
</body>
In my css files i have set body height: 100% and wrapper height: 100%. Width is always fixed for wrapper, width: 950px. I want my div to expand in height when the draggableItem reaches the bottom of the wrapper. Right now when the page is loaded, it has the height as big as the resolution allows it but in case I have more items in the wrapper then everything becomes cluttered and I would like when dragging an item to somehow expand the wrapper in height dynamically. This should happen only if I hit the bottom border.
PS: I am using jQuery and jQuery-ui.
I may have a solution. First off, I replaced part with '.draggableItem' and this where appropriate. Please tell me if that breaks the code in some critical way. In addition, I removed part.prev().css('top', ui.position.top - 20 ).css('left', ui.position.left ) in the code below.
function adjustWrapperHeight(movingObject)
{
var objectBottomPosition = $(movingObject).offset().top+$(movingObject).height()
var wrapperBottomPosition = $("#wrapper").offset().top+$("#wrapper").height()
if(wrapperBottomPosition-objectBottomPosition<distanceBuffer)
{
$("#wrapper").height($("#wrapper").height()+distanceBuffer+1)
}
}
var distanceBuffer = 20;
$('.draggableItem').draggable(
{
containment: 'parent',
drag: function(event, ui)
{
partIsDragging = true
adjustWrapperHeight(this)
},
stop: function(event, ui)
{
partIsDragging = false
}
}).resizable(
{
handles: 'ne, se, sw, nw,n,w,e,s',
resize: function(event, ui)
{
adjustWrapperHeight(this)
var objectRightPosition = $(this).offset().left+$(this).width()
var wrapperRightPosition = $("#wrapper").offset().left+$("#wrapper").width()
if(wrapperRightPosition<=objectRightPosition)
{
$(this).width(ui.originalSize.width)
var containmentLeftPosition = wrapperRightPosition-$(this).width()
$(this).offset({top:$(this).offset().top,left:containmentLeftPosition})
}
}
})
})
The function adjustWrapperHeight(movingObject) adjusts div#wrapper's height depending on a movingObject's bottom position. That is, when movingObject "pushes up" against div#wrapper's borders, it adjusts div#wrapper's height.
I had to use a hack for resizable. The containment: 'parent' for resizable (but not draggable) sets the containment to the container's ORIGINAL height or so it seems. That means as the height of div#wrapper dynamically changes, the constraint set by containment: 'parent' does not dynamically change. To fix this, I removed containment: 'parent' and indeed the entire containment and ensured that div#wrapper's right containment isn't broken within the resize event. Note that you should probably do this with div#wrapper's left containment as well.
Please tell me if this was helpful. Thank you.

Categories