Estoy tratando de proporcionar tanto la posibilidad de arrastrar y ordenar la función de entre 2 tablas. Tengo 2 método que el usuario puede seleccionar los archivos se pueden arrastrar y soltar los archivos o puede hacer doble clic en el archivo y será añadido a la lista seleccionado. ejemplo de código es @ http://jsfiddle.net/fwjaj/. El problema que tengo es que cuando hago doble clic y agregar los archivos que yo soy capaz de ordenarlos en los archivos seleccionados de la tabla, pero cuando yo arrastrar y soltar soy incapaz de hacerlo. Lo que me estoy perdiendo aquí? Cualquier ayuda es muy apreciada. Muchas gracias por tu ayuda.

Código de abajo

CSS

div {
    float: left;
    margin-left: 5px;
}

.draggable tbody td {
    padding: 2px;
    border: 1px solid black;
}

.draggable thead td {
    padding: 1px;
    border-bottom: 1px solid black;
    font-weight: bold;
}

tr.even {
    background-color: white;
}

tr.odd {
    background-color: #a6dbed;
}

HTML

Jquery

function refreshTables() {
$('#tblselectedFiles tbody,#tblFiles tbody').each(function () {
$('tr:odd', this).addClass('odd').removeClass('even');
$('tr:even', this).addClass('even').removeClass('odd');
});
}
$(document).ready(function () {
var c = {};
refreshTables();
$('#tblFiles tr').dblclick(function () {
var tr = this.outerHTML;
$(tr).addClass("selectedFiles");
$("#tblselectedFiles tbody").prepend(tr);
$(this).remove();
$("#tblselectedFiles tbody tr").eq(0).effect('highlight', {}, 3000);
refreshTables();
});
$("#tblFiles tr").draggable({
//connectToSortable: '#tblselectedFiles tbody',
helper: "original",
start: function (event, ui) {
c.tr = this;
c.helper = ui.helper;
}
});
var fixHelper = function (e, ui) {
ui.children().each(function () {
$(this).width($(this).width());
});
return ui;
};
$("#tblselectedFiles tbody").sortable({
helper: fixHelper
});
$("#tblselectedFiles tbody").disableSelection();
$("#divSelectedFiles").droppable({
drop: function (event, ui) {
var $cTr = $(ui.draggable);
$cTr.css("left", "");
$cTr.css("top", "");
if ($cTr.hasClass("selectedFiles"))
return;
$cTr.addClass("selectedFiles");
$("#tblselectedFiles tbody").prepend($cTr);
$cTr.effect('highlight', {}, 3000);
refreshTables();
}
});
});

Maddy.

InformationsquelleAutor user1181458 | 2013-09-24

2 Comentarios

  1. 5

    También a resolver su problema como este :

    jsFiddle

    http://jsfiddle.net/Rusln/fwjaj/4/

    JS

    $("#current-files").sortable({
    connectWith: "#selected-files"
    });
    $("#selected-files").sortable();
    $("#current-files li").dblclick(function(ev){
    $(this).prependTo("#selected-files");
    });

    HTML

    <div>
    <h3>Current Files</h3>
    <ul id="current-files">
    <li>File 1</li>
    <li>File 2</li></ul>
    </div>
    <div>
    <h3>Selected Files</h3>
    <ul id="selected-files"></ul>
    </div>

    CSS

    
    li:nth-child(2n){
    background-color:#a6dbed;
    }
    
  2. 0

    Esta no es necesariamente la respuesta a «¿qué es la derecho manera de resolver esto», pero yo veo un problema en el código.

    La línea en el controlador haga clic en:

    $("#tblselectedFiles tbody").prepend(tr);

    No es el mismo que el de la línea en el arrastre de controlador:

    $("#tblselectedFiles tbody").prepend($cTr);

    En la primera, tr referencias outerHTML, y en el segundo, $cTr hace referencia a un objeto jQuery. Si se puede convertir el objeto jQuery en el mismo tipo de objeto como este:

    $cTr[0].outerHTML

    va a trabajar. He probado en su jsFiddle.

    Como para por qué esto es cierto, voy a tener que hacer un poco más pensando en esto.

    EDICIÓN: me lo imaginé. Cuando se antepone el objeto jQuery en contraposición a la Cadena, todavía tiene la posibilidad de arrastrar la propiedad adjunta. Puede quitar esta llamando

    $cTr.draggable("destroy");
    • He hecho unos cambios en mi código en la base de sus sugerencias. Ahora arrastrar y soltar y, a continuación, la clasificación está trabajando bien, pero si hago doble clic y agregar el archivo y, a continuación, tratar de arrastrar y soltar no es poner el tr correctamente, usted puede encontrar mi código aquí jsfiddle.net/fwjaj/11. También veo que cuando arrastro el archivo que yo soy incapaz de verlo mientras se arrastra. Por favor, ayúdenme.
    • Echa un vistazo a rusln la respuesta, en realidad es más simple y mejor, tomando ventaja de las capacidades integradas de jQuery UI.

Dejar respuesta

Please enter your comment!
Please enter your name here