Comunidad de diseño web y desarrollo en internet online
Escrito el 24 Ago 2012 05:43 pm
|
lo que intento hacer es poner el atributo 'draggable' en true en tiempo de ejecucion pero no funciona, no se arrastra el elemento por ejemplo una lista <li/> estoy utilizando esto: Código Javascript : var lis = $('<li/>').attr('id',oID2+g.item().Name,'draggable','true').css('color','green').appendTo('#ulsub'+oID);alguna idea o me falta algo para que ese arrastre??... |
Por lowellpelikno
1 de clabLevel
|
|
|
Escrito el 24 Ago 2012 08:33 pm
|
Mmm... creo que has querido hacer esto:
Código Javascript :
var lis = $('<li/>').attr({'id':oID2+g.item().Name,'draggable':'true'}).css('color','green').appendTo('#ulsub'+oID);
Lo que debes hacer cuando quieres establecer más de un atributo con el método attr() de JQuery es pasarle un objeto anónimo, y la mejor forma es usando notación JSON como he hecho en el código. |
Por DriverOp Claber  2510 de clabLevel
Envíale un mensaje privado Web |
|
|
Escrito el 12 Sep 2012 04:52 pm
|
hola la verdad apenas empiezo con esto de jquery.. tengo el siguiente código que solo funciona en IE9 :
Código HTML :
<html>
<head>
<title>Using DOM to create HTML</title>
<style>
ul { color:green; margin:5px; cursor:pointer; }
li { color:red; margin:5px; cursor:pointer; }
p { color:blue; margin:5px; cursor:pointer; }
p:hover { background:yellow; }
#myDiv{background-color: silver;float: left; width: 20%;}
#cart{background-color: #ADD8E6; float: left; width: 20%; text-align: center;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript">
var entradas = 0;
var countLi = "";
var html = "";
var ul = 1;
var li = 1;
var directorioArchivo = 'C:\\Users\\jesus.felix\\Test.txt';
var fso2 = new ActiveXObject("Scripting.FileSystemObject");
var s;
//-----------------------------------------------------------------------------------------------
$(document).ready(function() {
$('#myDiv').append(drives());
//$("ul").click(openFolder);
$("ul li").live('dblclick',openFolder);
/*$("ul li").live('dblclick',function(openFolder){
$('li').toggle('show');});*/
/* $('#myDiv').find('ul').find('li').draggable({//esto funciona pero no bien..
helper:'clone',
appendTo:'body'
});*/
$('#cart').find('ol').droppable({
activeClass : 'ui-state-default',
hoverClass : 'ui-state-hover',
drop : function(event,ui){
//ui.draggable.find('.drag').remove();
$(this).find('.aqui').remove();
$(this).append('<li>'+ ui.draggable.text()+'</li>');
}
});
/*function() {
var oID = $(this).attr("id");
});*/
});
function drives() {
var content = '';
//var bytesPerGB = 1024 * 1024 * 1024;
var fso = new ActiveXObject("Scripting.FileSystemObject");
var e = new Enumerator(fso.Drives);
e.moveFirst();
var uls = $('<ul/>').attr({'id':'ul'}).appendTo('#myDiv');
uls.append("My Local PC");
if(fso.FileExists(directorioArchivo))
{
fso2.DeleteFile(directorioArchivo);
s = fso2.CreateTextFile(directorioArchivo,8,true);
s.WriteLine("este es un UL con ID = ul");
s.Close();
}else{
s = fso2.CreateTextFile(directorioArchivo,8,true);
s.WriteLine("este es un UL con ID = ul");
s.Close();
}
while (!e.atEnd()) {
var drv = e.item();
//content += "<p>";
if (drv.IsReady) {
//alert(drv.DriveLetter); // New <li> elements are created here and added to the <ul> element.
var lis = $('<li/>').attr({'id':drv.DriveLetter}).appendTo("#ul");
lis.append(drv.DriveLetter );
s = fso2.OpenTextFile(directorioArchivo,8,false,-1);
s.WriteLine("este es un LI con ID = "+drv.DriveLetter);
s.Close();
content += drv.DriveLetter ;
} else {
//content += "Not Ready";
}
//content += "</p>";
e.moveNext();
}
content += content;
}
function openFolder() {
var oID = $(this).attr("id");
var oIDText = $(this).text();
// alert("ruta para hacer la busqueda es " + oID);
var uls = $('<ul/>').attr({'id':'ulsub'+oID}).appendTo('#'+oID);
//uls.append("este es un sub ul de "+oID);
entradas++;
if (oIDText=="C" || oIDText=="D" || oIDText=="G")
{//cuando entra la primera ves hace esto......
//alert("el id en C: o D: es " + oID);
var fso = new ActiveXObject("Scripting.FileSystemObject");
var oID2 = oID + ':\\';
//alert("ruta para hacer la busqueda 1 es " + oID2);
var fldr = fso.GetFolder(oID2);
for (f = new Enumerator(fldr.subFolders); !f.atEnd(); f.moveNext())
{ //alert("el texto del elemento clikeado es " + f.item().Name);
var idFinal = f.item().Name.replace(/\ /g,'_');//alert(idFinal);
//idFinal = f.item().Name.replace(/\./g,'PunNtOZhePAraDorSH');
oID2 = oID2.replace(/\:/g,'SeparadorDePuntos');
oID2 = oID2.replace(/\\/g,'VaRraZeparaDouRha');
oID2 = oID2.replace(/\./g,'PunNtOZhePAraDorSH');
var lis = $('<li/>').attr({'id':oID2+idFinal}).css('color','blue').appendTo('#ulsub'+oID);
lis.append(f.item().Name);
s = fso2.OpenTextFile(directorioArchivo,8,false,-1);
s.WriteLine("este es un LI con ID = "+oID2+idFinal+" ***Que pertenece al <LI>disco "+oID);
s.Close();
}
for (g = new Enumerator(fldr.Files); !g.atEnd(); g.moveNext()){
var lis = $('<li/>').attr({'id':oID2+g.item().Name,'draggable':'true'}).css('color','green').appendTo('#ulsub'+oID);//linea que fallla
lis.append(g.item().Name);
}
}
else if (entradas>0)
{
/// ya que estan los folders y ase nuevamente click hace esto....
//alert("el id EN entradas > 0 es " + oID);
var uls = $('<ul/>').attr({'id':'ulsub1'+oID}).appendTo('#'+oID);
//alert("el padre de este nodo es " + parentEls);
var oID2 = oID.replace(/\SeparadorDePuntos/g,':');
oID2 = oID2.replace(/\VaRraZeparaDouRha/g,'\\');
oID2 = oID2.replace(/\PunNtOZhePAraDorSH/g,'.');
oID2 = oID2.replace(/\_/g,' ');
//var oID3 = oID3.replace(/\_/g,' ')
var fso = new ActiveXObject("Scripting.FileSystemObject");
oID2 = oID2 + '\\';
//alert("ruta para hacer la busqueda2 es " + oID2);
var fldr = fso.GetFolder(oID2);
// alert("ruta para buscar es " + oID2);
for (f = new Enumerator(fldr.subFolders); !f.atEnd(); f.moveNext())
{
var id = f.item().Name;//alert(id);
var idFinal="";
for ( i = 0; i < id.length; i++ )
{
if (id.charAt(i) == " " )
{
idFinal += id.charAt(i).replace(/\ /g,'_'); //alert(idFinal);
}else if ( id.charAt(i) == "." ){
idFinal += id.charAt(i).replace(/\./g,'PunNtOZhePAraDorSH');//alert(idFinal);
}else {
idFinal += id.charAt(i);
}
}
//idFinal = f.item().Name.replace(/\./g,'PunNtOZhePAraDorSH');
oID2 = oID2.replace(/\:/g,'SeparadorDePuntos');
oID2 = oID2.replace(/\\/g,'VaRraZeparaDouRha');
oID2 = oID2.replace(/\./g,'PunNtOZhePAraDorSH');
oID2 = oID2.replace(/\ /g,'_');
var lis = $('<li/>').attr('id',oID2+idFinal).appendTo('#ulsub1'+oID);
lis.append(f.item().Name);
s = fso2.OpenTextFile(directorioArchivo,8,false,-1);
s.WriteLine("este es un Sub LI con ID = "+oID2+idFinal+" ***Que pertenece al <LI>disco "+oID);
s.Close();
//alert("con esta Ruta se guarda --- " + oID2+f.item().Name);
}
for (g = new Enumerator(fldr.Files); !g.atEnd(); g.moveNext()){
var lis = $('<li/>').attr('id',oID2+g.item().Name).css('color','orange').appendTo('#ulsub1'+oID);
lis.append(g.item().Name);
}
entradas++;
}
return content;
}
</script>
</head>
<body>
<div id="myDiv"></div>
<div id="cart">
<h3><a href="#">Carrito de Compras</a></h3>
<ol>
<li class='aqui'>Arrastrar Aqui!!</li>
</ol>
</div>
<script type="text/javascript">//document.write(drives());
</script>
</body>
</html>
estoy tratando de hacer un upload de archivos es de un proyecto para mis estudios, el problema es que de esta forma no me deja arrastrar los archivos pero si quito el 'draggable':'true' y lo avilito esto en la parte de arriba. $('#myDiv').find('ul').find('li').draggable({//esto funciona pero no bien helper:'clone', appendTo:'body' }); me permite arrastrar pero selecciona todos los archivos y no me deja soltar en donde corresponde.. |
Por lowellpelikno
1 de clabLevel
|
|
|
Escrito el 12 Sep 2012 05:42 pm
|
hola de nuevo me auto respondo.. creo que encontré la solución. el código queda de la siguiente manera..
vuelvo a recalcar solo funciona en IE9 Código HTML :
<html>
<head>
<title>Using DOM to create HTML</title>
<style>
ul { color:green; margin:5px; cursor:pointer; }
li { color:red; margin:5px; cursor:pointer; }
p { color:blue; margin:5px; cursor:pointer; }
p:hover { background:yellow; }
#myDiv{background-color: silver;float: left; width: 20%;}
#cart{background-color: #ADD8E6; float: left; width: 20%; text-align: center;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript">
var entradas = 0;
var countLi = "";
var html = "";
var ul = 1;
var li = 1;
var directorioArchivo = 'C:\\Users\\jesus.felix\\Test.txt';
var fso2 = new ActiveXObject("Scripting.FileSystemObject");
var s;
//-----------------------------------------------------------------------------------------------
$(document).ready(function() {
$('#myDiv').append(drives());
//$("ul").click(openFolder);
$("ul li").live('dblclick',openFolder);
/*$("ul li").live('dblclick',function(openFolder){
$('li').toggle('show');});*/
/* $('#myDiv').find('ul').find('li').draggable({
helper:'clone',
appendTo:'body'
});*/
$('#cart').find('ol').droppable({
activeClass : 'ui-state-default',
hoverClass : 'ui-state-hover',
drop : function(event,ui){
//ui.draggable.find('.drag').remove();
$(this).find('.aqui').remove();
$(this).append('<li>'+ ui.draggable.text()+'</li>');
}
});
/*function() {
var oID = $(this).attr("id");
});*/
});
function drives() {
var content = '';
//var bytesPerGB = 1024 * 1024 * 1024;
var fso = new ActiveXObject("Scripting.FileSystemObject");
var e = new Enumerator(fso.Drives);
e.moveFirst();
var uls = $('<ul/>').attr({'id':'ul'}).appendTo('#myDiv');
uls.append("My Local PC");
if(fso.FileExists(directorioArchivo))
{
fso2.DeleteFile(directorioArchivo);
s = fso2.CreateTextFile(directorioArchivo,8,true);
s.WriteLine("este es un UL con ID = ul");
s.Close();
}else{
s = fso2.CreateTextFile(directorioArchivo,8,true);
s.WriteLine("este es un UL con ID = ul");
s.Close();
}
while (!e.atEnd()) {
var drv = e.item();
//content += "<p>";
if (drv.IsReady) {
//alert(drv.DriveLetter); // New <li> elements are created here and added to the <ul> element.
var lis = $('<li/>').attr({'id':drv.DriveLetter}).appendTo("#ul");
lis.append(drv.DriveLetter );
s = fso2.OpenTextFile(directorioArchivo,8,false,-1);
s.WriteLine("este es un LI con ID = "+drv.DriveLetter);
s.Close();
content += drv.DriveLetter ;
} else {
//content += "Not Ready";
}
//content += "</p>";
e.moveNext();
}
content += content;
}
function openFolder() {
var oID = $(this).attr("id");
var oIDText = $(this).text();
// alert("ruta para hacer la busqueda es " + oID);
var uls = $('<ul/>').attr({'id':'ulsub'+oID}).appendTo('#'+oID);
//uls.append("este es un sub ul de "+oID);
entradas++;
if (oIDText=="C" || oIDText=="D" || oIDText=="G")
{//cuando entra la primera ves hace esto......
//alert("el id en C: o D: es " + oID);
var fso = new ActiveXObject("Scripting.FileSystemObject");
var oID2 = oID + ':\\';
//alert("ruta para hacer la busqueda 1 es " + oID2);
var fldr = fso.GetFolder(oID2);
for (f = new Enumerator(fldr.subFolders); !f.atEnd(); f.moveNext())
{ //alert("el texto del elemento clikeado es " + f.item().Name);
var idFinal = f.item().Name.replace(/\ /g,'_');//alert(idFinal);
//idFinal = f.item().Name.replace(/\./g,'PunNtOZhePAraDorSH');
oID2 = oID2.replace(/\:/g,'SeparadorDePuntos');
oID2 = oID2.replace(/\\/g,'VaRraZeparaDouRha');
oID2 = oID2.replace(/\./g,'PunNtOZhePAraDorSH');
var lis = $('<li/>').attr({'id':oID2+idFinal}).css('color','blue').appendTo('#ulsub'+oID);
lis.append(f.item().Name);
s = fso2.OpenTextFile(directorioArchivo,8,false,-1);
s.WriteLine("este es un LI con ID = "+oID2+idFinal+" ***Que pertenece al <LI>disco "+oID);
s.Close();
}
for (g = new Enumerator(fldr.Files); !g.atEnd(); g.moveNext()){
var lis = $('<li/>').attr({'id':oID2+g.item().Name,'draggable':'true'}).draggable({'helper':'clone','appendTo':'body'}).css({'color':'green'}).appendTo('#ulsub'+oID);
lis.append(g.item().Name);
}
}
else if (entradas>0)
{
/// ya que estan los folders y ase nuevamente click hace esto....
//alert("el id EN entradas > 0 es " + oID);
var uls = $('<ul/>').attr({'id':'ulsub1'+oID}).appendTo('#'+oID);
//alert("el padre de este nodo es " + parentEls);
var oID2 = oID.replace(/\SeparadorDePuntos/g,':');
oID2 = oID2.replace(/\VaRraZeparaDouRha/g,'\\');
oID2 = oID2.replace(/\PunNtOZhePAraDorSH/g,'.');
oID2 = oID2.replace(/\_/g,' ');
//var oID3 = oID3.replace(/\_/g,' ')
var fso = new ActiveXObject("Scripting.FileSystemObject");
oID2 = oID2 + '\\';
//alert("ruta para hacer la busqueda2 es " + oID2);
var fldr = fso.GetFolder(oID2);
// alert("ruta para buscar es " + oID2);
for (f = new Enumerator(fldr.subFolders); !f.atEnd(); f.moveNext())
{
var id = f.item().Name;//alert(id);
var idFinal="";
for ( i = 0; i < id.length; i++ )
{
if (id.charAt(i) == " " )
{
idFinal += id.charAt(i).replace(/\ /g,'_'); //alert(idFinal);
}else if ( id.charAt(i) == "." ){
idFinal += id.charAt(i).replace(/\./g,'PunNtOZhePAraDorSH');//alert(idFinal);
}else {
idFinal += id.charAt(i);
}
}
//idFinal = f.item().Name.replace(/\./g,'PunNtOZhePAraDorSH');
oID2 = oID2.replace(/\:/g,'SeparadorDePuntos');
oID2 = oID2.replace(/\\/g,'VaRraZeparaDouRha');
oID2 = oID2.replace(/\./g,'PunNtOZhePAraDorSH');
oID2 = oID2.replace(/\ /g,'_');
var lis = $('<li/>').attr('id',oID2+idFinal).appendTo('#ulsub1'+oID);
lis.append(f.item().Name);
s = fso2.OpenTextFile(directorioArchivo,8,false,-1);
s.WriteLine("este es un Sub LI con ID = "+oID2+idFinal+" ***Que pertenece al <LI>disco "+oID);
s.Close();
//alert("con esta Ruta se guarda --- " + oID2+f.item().Name);
}
for (g = new Enumerator(fldr.Files); !g.atEnd(); g.moveNext()){
var lis = $('<li/>').attr({'id':oID2+g.item().Name, 'draggable':'true'}).draggable({'helper':'clone','appendTo':'body'}).css({'color':'orange'}).appendTo('#ulsub1'+oID);
lis.append(g.item().Name);
}
entradas++;
}
return content;
}
</script>
</head>
<body>
<div id="myDiv"></div>
<div id="cart">
<h3><a href="#">Carrito de Compras</a></h3>
<ol>
<li class='aqui'>Arrastrar Aqui!!</li>
</ol>
</div>
<script type="text/javascript">//document.write(drives());
</script>
</body>
</html>
en mi pc tiembla mucho la pantalla al arrastrar un elemento no se si sera defecto de la tarjeta de vídeo o del script o de laguna otra cosa.. los únicos elementos que se pueden mover son los de color verde... si me ayudar a mejorarlo les estaría infinitamente agradecido.. |
Por lowellpelikno
1 de clabLevel
|
|
|