Search jQuery

jQuery Forum

Using scope whith draggable div

in Using jQuery UI • 10 years ago

Hello everyone !

In my code, when I dynamically create a div and I add to it a scope, this div is no longer draggable and retur an error when I click on it:

"Uncaught TypeError: Can not read property 'length' of undefined"

The code is a little messy.
It's not final, it's juste for some tests

var availableLineJTAB=1;
var stepID=0;
document.write('<div id="element" style="background-color:GREEN;height:20px;width:60px;"></div>');
document.write('<table id="jtab" style="border-collapse:collapse;padding:opx;">');
for(var i=0;i<10;i++){
document.write('<tr id="hor-'+i+'" style="">');
if(i==0){
for(var m=0;m<12;m++){
document.write('<th id="title-'+m+'" colspan="4" style="border-style:solid;border-width:1px;border-color:DARK;background-color:LIGHTBLUE;height:30px;width:120px;">');
if(m==0)document.write('<h2>JANVIER</h2>');
if(m==1)document.write('<h2>FEVRIER</h2>');
if(m==2)document.write('<h2>MARS</h2>');
if(m==3)document.write('<h2>AVRIL</h2>');
if(m==4)document.write('<h2>MAI</h2>');
if(m==5)document.write('<h2>JUIN</h2>');
if(m==6)document.write('<h2>JUILLET</h2>');
if(m==7)document.write('<h2>AOUT</h2>');
if(m==8)document.write('<h2>SEPTEMBRE</h2>');
if(m==9)document.write('<h2>OCTOBRE</h2>');
if(m==10)document.write('<h2>NOVEMBRE</h2>');
if(m==11)document.write('<h2>DECEMBRE</h2>');
document.write('</th">');
}
}else{
//definition des cases de la lignes
for(var y=0;y<48;y++){
document.write('<td id="zone-'+i+'-'+y+'" class="hor-'+i+'" style="position:relative;border-style:solid;border-width:1px;border-color:LIGHTGRAY;height:30px;">');
document.write('</td>');
var group;
if(i==availableLineJTAB){
group="availableLine";
}else{
group="disableLine";
}
$('#zone-'+i+'-'+y).droppable({
scope:group,
drop: function(event, ui){
if($(ui.draggable).attr("id")=="element" ){
$(".hor-"+availableLine).droppable('option','scope','affectedLine-'+stepID);
this.innerHTML='<div id="jstep-'+stepID+'" style="position:absolute;background-color:LIGHTGREEN;height:20px;width:90px;float:left;top:5px; z-index: 100;"></div>';
$('#jstep-'+stepID).draggable({
helper: "clone",
scope:'affectedLine-'+stepID
});
stepID++;
}else{
ui.draggable.appendTo(this);
}
}
});
}
}
document.write('</tr>');
}
document.write('</table>');
$('#element').draggable({
helper: "clone",
scope:'availableLine'
});
The div creation is on line 49
Thanks !

Response title

Attachments

jQuery Forum

Using scope whith draggable div

Statistics

Tags

Actions