Develop Reference

Extend jsplumb.draggable drag behavior

I am sure that I am missing something here, but I would like to extend the drag behavior of a div with jsPlumb.draggable class attributes that is attached to an endpoint, while preserving the jsPlumb.draggable attributes.
I would like something like this (adapted from this SO):
$('#dragcodes').draggable(
{
drag: function(){
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
console.log('x: ' + xPos);
console.log('y: ' + yPos);
}
});
on an element that is created using:
jsPlumb.draggable($(".dragcodes"));
Here is an example of what I am trying to do. I want the top box to read the position out on drag like the bottom one is, but cannot figure out how to hack the drag: function in jsPlumb.draggable. The binding behavior here is getting close, but I want to target the div that is attached to the endpoint. If I override the drag: functionality, I lose the jsPlumb.draggable attributes. Thanks in advance for your help.

In Version 1.6.3 the following Code works:
jsPlumb.draggable("#dragcodes", {
drag: function (event, ui) { //gets called on every drag
console.log(ui.position); //ui.position.left and ui.position.top
}
});

jsPlumb.draggable helps to update the DOM element whenever it is dragged. Instead you can write that code in jQuery draggable as:
$('#dragcodes').draggable(
{
drag: function(){
jsPlumb.repaint($(this)); // (or) jsPlumb.repaintEverything(); to repaint the connections and endpoints
//followed by your code
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
console.log('x: ' + xPos);
console.log('y: ' + yPos);
}
});
Now there is no need for jsPlumb.draggable($(".dragcodes"));

The best approach is to configure DragOptions of jsPlumb.Defaults. You have to specify drag function:
jsPlumb.getInstance({
....,
DragOptions: {
drag: function() {
}
},
....
);

JsPlumb Version 2.1.4
jsPlumb.draggable("#yourElement", {
drag: function (event) {
console.log(event.pos[0]); // for left position
console.log(event.pos[1]); // for top position
}
);
Or
jsPlumb.draggable("#yourElement", {
drag: function (event) {
$(event.el).position().left; // for left position
$(event.el).position().top; // for top position
}
);

jQuery drag and drop with sortable

I am having an issue trying to get an array out of JS using the sortable on some drag and drop elements.
A working demo can be found at:
Example
What I need to achieve:
Drag item on image, get x,y (done)
after all items have been placed, use jQuery sortable? to get array of id's with x,y coordinates.
array(23456->{xpos:234,ypos:234},23456->{xpos:234,ypos:234},....etc
I am not sure how to bind the sortable to the items only dropped on the image, and then get those values into an array
Here is the code so far:
jQuery(function($){
$('.dragThis').bind('click', function(){
$(this).css("border","3px solid #fff");
$(this).draggable({
containment: $('body'),
drag: function(){
$('#dropHere').droppable({
accept: '.dragThis',
over : function(){
$(this).animate({'border-width' : '3px', 'border-color' : '#0f0'}, 500);
}
});
},
stop: function(){
var position = $(this).position();
var parentPos = $('#dropHere').offset();
var xPos = position.left - parentPos.left;
var yPos = position.top - parentPos.top;
var finalOffset = $(this).position();
var finalxPos = xPos;
var finalyPos = yPos;
$('#finalX').text('Final X: ' + finalxPos);
$('#finalY').text('Final Y: ' + finalyPos);
//$('.dragThis').sortable();
console.log (finalxPos,finalyPos,$(this).attr("id"));
},
revert: 'invalid'
//connectToSortable: '#dropHere'
});
});
});
Any help getting pointed in the right direction, is greatly appreciated.
Just to clarify, I will be writing the values via AJAX to a DB for recall later.
Thanks in advance

Simple solution:
Add a class for those elements on their own 'drop' event, then get all of those have classes with a selector.
After that, a handy $.fn.each() and $.fn.offset() will help.
You can then work on those coordinates with top, left instead of your mentioned xpos, ypos.
Here is an example:
var coordinates = {};
$(".dropped").each(function(item) {
coordinates[$(item).attr("id")] = $(item).offset();
});

Get X,Y position of div

I have 3x3 list of jQuery divs like so :
div1 div2 div3
div4 div5 div6
div7 div8 div9
When a div is dragged & dropped I would like to get its X & Y position in relation to the other div elements. so if div1 is dragged to div3 position I need to retrieve the postion 0,3 which represents the new position of div1. Do I need to use a plugin ?
So just to need to override droppable like so and get position :
$( ".myClass" ).droppable({ drop: function( event, ui )
{
alert('my position in relation to other divs is '+????
}
});
Ive added a jsFiddle : http://jsfiddle.net/aL3tr/
Can the X & Y co-ordinate of dropped item be retrieved ? In this case Y position will always be zero.

I forked your fiddle: http://jsfiddle.net/44R97/ to check the position within the #sortable-list:
stop: function() {
var myPos = $('#sortable').find('li.ui-draggable');
alert("I am at position "+($('#sortable').find('li').index(myPos)+1));
}
Note, that .index() counts from 0. Therefor I added 1 to the result...

add this to your draggable
stop: function(e,ui) {alert(ui.offset.top+","+ui.offset.left);}
(update)
ok, for all the siblings
$( "#sortable" ).sortable({
update: function(e,ui) {
console.log(ui.item.parent());
var i=ui.item;
ui.item.parent().children().each(
function (i,e) {
alert(ui.item.offset().top-$(e).offset().top);
}
);
},
revert: true
});
here obtaining X relative distance, Y is always 0 but you can obtain it in similar way

I updated your fiddle to show the coordinates of the clicked element with the following snippet:
$("li").click(function() {
alert("I am at (" + this.offsetLeft + "," + this.offsetTop + ").");
});

How to increase text inside div with its size

I have added multiple dynamic divs inside a container div. Each div contains text. Its works fine. But when I added resizable functionality to a div using jquery library. I am able to resize div's but its text size is static. What I want when i increase the div size its text size should also increase and vice versa.
Below is the code with which I have adding resizable functionality and appending to a parent.
var div = document.createElement('div');
$(div).attr("id", "dyndiv" + count);
objid = "dyndiv" + count ;
count++;
var $ctrl = $(div).text($('#txttext').val()).addClass("draggable ui-widget-content").draggable({ containment: '#containment-wrapper', cursor: 'move', snap: '#containment-wrapper' }).resizable({ aspectRatio:true, containment: '#containment-wrapper' });
$("#containment-wrapper").append($ctrl);

Heres an example of what i mean, you may need to mess with the calculation though to include height some how as of right now you can have a small height, but a large text that doesnt exactly fit in the box.
http://jsfiddle.net/HpSwu/1/
$( ".selector" ).resizable({
resize: function(event, ui) {
newSize = $(this).width()*0.1;
$(this).css('font-size', newSize );
}
});
EDIT
Something like:
var $ctrl = $(div).text($('#txttext').val())
.addClass("draggable ui-widget-content")
.draggable({
containment: '#containment-wrapper',
cursor: 'move',
snap: '#containment-wrapper' })
.resizable({
aspectRatio:true,
containment: '#containment-wrapper',
resize: function(event, ui) {
newSize = $(this).width()*0.1;
$(this).css('font-size', newSize );
}
});

jQuery resizable() dynamic maxWidth option

I have 3 columns that are resizable. When one is made wider, the one to it's left is made smaller. Essentially there are only 2 handles. Left col and Mid col. So when Mid col is made thinner, Right col expands accordingly. All three of them are contained with a 900px parent div, so the sum of all three is always 900. They have max and min widths set statically.
My issue is that if you take the left handle and move it all the way to the right you're still able to use the right handle and expand the mid col past the edge of the parent div.
I thought of a way to solve that issue by writing up a function that checks the widths of the columns and then subtracts left and right columns from the parent div width, I called it mWid. This leaves me with the number I want to set as the maxWidth for Mid col.
Now the issue is that mWid is not gettings updated for here "maxWidth: mWid"
Here is what the function for the right handle looks like:
$(function() {
$("#midResizable").resizable({
handles: 'e',
containment: '#container',
maxWidth: mWid, // gets set once, but doesn't update! WHY?
minWidth: 195,
resize: function(event, ui) {
contWidth = $('#container').width()
newWidth = $(this).width()
leftWidth = $('#leftResizable').width()
rightWidth = $('#rightResizable').width()
$("#rightResizable").css("width", (contWidth-15)-(newWidth)-(leftWidth)+"px");
checkWid()
}
});
});
function checkWid() {
rightWidth = $('#rightResizable').width()
leftWidth = $('#leftResizable').width()
contWidth = $('#container').width()
mWid = (contWidth-15)-(rightWidth)-(leftWidth)
}

Check this out: http://jqueryui.com/demos/resizable/#option-maxWidth
Looks like maxWidth: mWid, only gets called on init.
The maxWidth needs to be explicitly set after that, like this:
$( "#midResizable" ).resizable( "option", "maxWidth", mWid );

you can use the below code in start method of resizable. It will update the maxWidth and maxHeight dynamically whenever you try to resize the div element.
$('.droppedBtn').resizable({
.... //you resizable properties
start: function(event,ui)
{
$( ".CLASSNAME" ).resizable( "option", "maxWidth", layout.lWidth);
$( ".CLASSNAME" ).resizable( "option", "maxHeight", layout.lHeight);
},
stop: function(event,ui){
}
});