[noobydoods]

i have this code that creates a div, adds id and appends the div. I am trying to drag that div but its not working like it should.

$("<div class='twin_seat' style='width:120px;display:table-row;'></div>").attr('id', twinseatsid).appendTo(newDiv);.draggable({ 
	containment: newDiv,
	snap: true,
        helper: 'clone'
});

im using helpe: clone because i just want to visually see the element being dragged because when looking at the developer console the div does get dragged but it doesnt stay where it gets dragged to; that's the issue. help please. TIA.

[ArtificialSoldier]

There's an extra semicolon in the method chain that would cause a syntax error.

Quote

the div does get dragged but it doesnt stay where it gets dragged to

That sounds like it might be an issue with the containment or snap options, or default behavior controlled by an option that you didn't use. If it doesn't stay where you released it, what does it do?

[noobydoods]

Quote

There's an extra semicolon in the method chain that would cause a syntax error.

that semicolon has been removed but the element still does not stick.

the element doesn't do anything it just stays where it was cloned at, when i try to drag the element the left and top in the style attribute does change accordingly so i know the element does get dragged just that it doesnt stick. coz i did the same thing with a different element which does drag and stay.

single_chair.draggable({ 
	containment: newDiv,
	snap: true
});

This post has been edited by noobydoods: 27 January 2015 - 02:37 PM

[ArtificialSoldier]

Is it an issue with the containment element? Is it no larger than the draggable element?

[andrewsw]

Are you sure you are dragging the div? I obviously cannot see your page but a div with just that styling (and no content) has no dimensions.

This post has been edited by andrewsw: 27 January 2015 - 02:58 PM

[noobydoods]

that is how it looks like. B1 and B2 on the far right is me dragging it and it can be seen coz of helper: 'clone' and, suppose to stick there when i let go of the mouse but instead it doesn't.

here's the whole code for that:

var twinseatsid = "twinseat" + twinseats;
//create div for twin seats
$("<div class='twin_seat' style='width:120px;display:table-row;'></div>").attr('id', twinseatsid).appendTo(cinema).draggable({ 
    containment: cinema,
    snap: true,
    helper: 'clone'
});
//create unique id
var twin_chair1_id = "B" + twin_chairid1;
var twin_chair2_id = "B" + twin_chairid2;
//create label to display unique id
var label1 = $("<label></label>").text(twin_chair1_id);
var label2 = $("<label></label>").text(twin_chair2_id);
//clone chair and add unique id             
var twin_chair1 = $(single).clone().attr('id', twin_chair1_id).append(label1);
var twin_chair2 = $(single).clone().attr('id', twin_chair2_id).append(label2);
//append chair to div
twin_chair1.appendTo("#twinseat" + twinseats).css('display','table-cell');
twin_chair2.appendTo("#twinseat" + twinseats).css('display','table-cell');
//increment number for unique id
twin_chairid1 ++;
twin_chairid2 ++;
twinseats ++;

[noobydoods]

the display:table-row was the culprit. did not know that that css would prevent it from dragging.