Estoy tratando de construir un draggable/drop a la carpeta de la vista de archivos con jQuery UI, pero me estoy quedando en un problema con el, lo que yo creo que se atribuye a la auxiliar. Aquí está mi código:

El HTML

<body>
<div id="topContainer">
<span>Parent Directory 1</span>
</div>
<span id="topFolder" class="folder">
<div class="drop">
</div>
</span>
<hr />
<div id="container" class="container">
<div class="dropzone">
<span>Parent Directory 2</span>
</div>
<div id="cont1" class="container">
<div class="dropzone">
<span>Folder 1</span>
</div>
<span id="folder1" class="folder">
<div class="drop">
<div class="drag">&nbsp;</div>
<div class="drag">&nbsp;</div>
<div class="drag">&nbsp;</div>
<div class="drag">&nbsp;</div>
<div class="drag">&nbsp;</div>
<div class="drag">&nbsp;</div>
<div class="drag">&nbsp;</div>
<div class="drag">&nbsp;</div>
<div class="drag">&nbsp;</div>
<div class="drag">&nbsp;</div>
<div class="drag">&nbsp;</div>
<div class="drag">&nbsp;</div>
</div>
</span>
</div>
<div id="cont2" class="container">
<div class="dropzone">
<span>Folder 2</span>
</div>
<span id="folder2" class="folder">
<div class="drop">
</div>
</span>
</div>
<div id="cont3" class="container">
<div class="dropzone">
<span>Folder 3</span>
</div>
<span id="folder3" class="folder">
<div class="drop">
</div>
</span>
</div>
<span id="mainFolder" class="folder">
<div class="drop">
<div class="drag">&nbsp;</div>
</div>
</span>
</div>
</body>

El jQuery

$(document).ready(function () {
var opts = {
helper: 'clone',
appendTo: 'body'
//appendTo: '#container'
};
$('div.drag').each(function () {
$(this).draggable(opts);
});
$('.dropzone, #topContainer').droppable({
drop: function (e, ui) {
var clone = $(ui.draggable).clone();
clone.draggable(opts);
$(this).siblings('.folder').children('.drop').append(clone);
$(this).removeClass('over');
},
over: function (e, ui) {
$(this).addClass('over');
},
out: function (e, ui) {
$(this).removeClass('over');
}
});
});

El CSS

.dropzone {
height: 300px;
width: 100px;
border: 1px solid black;
}
.drag {
clear: both;
height: 50px;
width: 80px;
background-color: black;
position: relative;
cursor: pointer;
}
#topContainer, .dropzone {
height: 50px;
width: 300px;
border: 2px solid black;
text-align: center;
}
.folder .drag {
margin: 5px;
}
.container {
border: 2px solid blue;
margin: 10px;
}
.over {
background-color: yellow;
}    
#container {
width: 800px;
height: 600px;
overflow-y: scroll;
border-color: red;
position: relative;
}

El Violín: jsFiddle

Así que la idea es… arrastra uno de los bloques negros de la carpeta (Directorio principal de 1 Directorio Padre 2, Carpeta 1, etc.). Que todo parece funcionar bien.

Lo que no funciona bien es cuando el padre (#contenedor) o el cuerpo tiene un exceso. Si usted haga clic en un bloque para arrastrar y tratar de rueda de desplazamiento, no se puede… o si seguir intentando, a veces se puede. (No es obvio con mi resolución de pantalla, pero en el Violín código, hay una barra de desplazamiento para el #elemento contenedor) supongo que esto tiene algo que ver con el foco de donde estoy anexando la ayuda.

Porque me puse a pensar en esto último, empecé a anexar el que ayuda a diferentes lugares. Con #contenedor de ser la zona que más me interesa, me puede anexar el ayudante de allí y el desplazamiento que funciona muy bien (descomentar //appendTo: ‘#contenedor’ y comentar el appendTo: ‘cuerpo’).

Sin embargo, esto presenta otro problema. Ahora que estoy anexando a la #elemento contenedor, mi bloque no puede ser visto cuando es arrastrado a la Directorio Padre 1 carpeta, que me llevan a creer que hay algo mal con ayudante.

Bastante seguro, si no de usuario helper: ‘clon’, puede desplazarse maravillosamente. Esta no es una opción porque me gusta tener mi clon no. Así que me dirijo a ustedes. ¿Cómo puedo arreglar mi problema, y lo que está pasando exactamente? ¿Alguien tiene algún consejo? Me encantaría escuchar de ti.

También es bueno tener en cuenta que he tratado de establecer la zIndex y la pila de opciones para la que se pueden arrastrar, pero no van. Supongo que voy a tener que hacer un custom función auxiliar, y hacer que sea consciente de lo que está siendo arrastrado más… pero tengo la esperanza de que hay una manera más fácil de solucionar.

Si alguien tiene ideas, me encantaría escucharlo. Gracias!

  • Estoy un poco desconcertado… es que este ‘ayudante’ un método predeterminado o algunas de las variables que se definen? Plz clearify en que, gracias!
  • Hola Adán, es una opción que se puede especificar a la hora de crear la posibilidad de arrastrar un objeto de jQuery. Ver este para más información.
InformationsquelleAutor incutonez | 2013-04-15

1 Comentario

  1. 4

    Heres un código de un violín: http://jsfiddle.net/crowjonah/Fr7u8/3/

    HTML:

    <table>
    <tr class="drag_me">
    <td>drag me</td>
    </tr>
    <tr class="drag_me">
    <td>drag me</td>
    </tr>
    <tr class="drag_me">
    <td>drag me</td>
    </tr>
    <tr class="drag_me">
    <td>drag me</td>
    </tr>
    </table>
    <div class="upper"></div>
    <div class="drop_area">
    <ul>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    </ul>
    </div>
    <div class="lower"></div>

    jQuery:

    $('.drag_me').draggable({
    helper: 'clone',
    scroll: 'true',
    refreshPositions: true
    });
    $('.drop_on_me').droppable({
    accept: '.drag_me',
    activeClass: 'active',
    hoverClass: 'hover',
    tolerance: 'pointer'
    });
    $('.upper').droppable({
    over: function(event, ui){
    $('.drop_area').autoscroll({
    direction: 'up',
    step: 150,
    scroll: true
    });
    },
    out: function(event, ui){
    $('.drop_area').autoscroll('destroy');
    }
    });
    $('.lower').droppable({
    over: function(event, ui){
    $('.drop_area').autoscroll({
    direction: 'down',
    step: 150,
    scroll: true
    });
    },
    out: function(event, ui){
    $('.drop_area').autoscroll('destroy');
    }
    });

    Relacionados a esta pregunta: jQuery interfaz de usuario: se pueden arrastrar de Desplazamiento Problema

    Es un ejemplo de trabajo de un dragable elemento dentro de un contenedor con overflow: scroll

Dejar respuesta

Please enter your comment!
Please enter your name here