Todavía soy bastante nueva para jQuery y tenía una pregunta. Estoy tratando de implementar un «arrastrar y soltar» método donde el usuario puede arrastrar elementos en una lista y caer en «cubos» en otro. Me parece que tienen el arrastre de la parte de abajo, pero dos cosas están causando errores. En primer lugar, me parece que no puede quitar el «clon», que se arrastra y la segunda de los que no puedo quitar el elemento original de la «Draggable» de la lista. Bellow es mi código (después de haber sido prestados en ASP.Net».

Estoy usando las siguientes Bibliotecas jQuery:

  1. 1.4.2/jquery.js,jquery.ui.core.js
  2. jquery.ui.widget.js
  3. jquery.ui.mouse.js
  4. jquery.ui.draggable.js
  5. jquery.ui.droppable.js.

JScript:

    $(function () {
        $(".draggable1").draggable({
            helper:'clone',
            scroll: false,
            revert: "invalid",
            appendTo: '#PopupBody',             
            drag: function(event,ui){              
            }               

        });

        $(".droppable1").droppable({   

            activeClass: "ui-state-hover",
            hoverClass: "ui-state-active",
            drop: function (event, ui) {
                var drag_id = $(ui.draggable).attr("id");
                var targetElem = $(this).attr("id");
                deleteMe = true;            
              $(this)
            .addClass("ui-state-highlight")
            .find("p")
            .html("Dropped! inside " + targetElem);
              //destroy clone
             //remove from list


            }
        });
    });

HTML:

<table style="width:100%; height:100%; position:relative; border:1px solid blue;">
   <tr>
     <td style="height:100%">
        <div id="divWrapper" style="position:relative; border:1px solid green; overflow:auto;  width:15em; height:80%;">
           <table id="testDlg1_dlUsers" cellspacing="0" style="border-collapse:collapse;">
              <tr>
                 <td style="color:#8C4510;background-color:#FFF7E7;">
                    <div id="divWrapperItem"  class="draggable1 ui-widget-content" style="border:1px solid black;">
                       <table>
                         <tr>
                            <td>
                               <span id="testDlg1_dlUsers_DOBLabel_0">Hello</span>
                            </td>
                         </tr>
                       </table>
                   </div>
                </td>
             </tr>
          </table> 
      </div>
   </td>
   <td style="height:100%">
        <div style="position:relative; border:1px solid green; width:15em; height:80%;">
            <table id="testDlg1_dlGroups" cellspacing="0" style="border-collapse:collapse;">
               <tr>
                 <td style="color:#8C4510;background-color:#FFF7E7;">
                    <div id="testDlg1_dlGroups_droppable1_0" class="droppable1 ui-widget-header" style="border:1px solid black; padding-left:20px;">
                       <table>
                          <tr>
                             <td>
                                <span id="testDlg1_dlGroups_DOBLabel_0">Trash</span>
                             </td>
                         </tr>
                       </table>
                     </div>
                 </td>
             </tr>
          </table> 
Por favor, puedes agregar un jsfiddle o un enlace?
Yo nunca he usado jsFiddle, pero le daremos una oportunidad. Una vez que la hago, la enfermedad post atrás. gracias
eh, jsFiddle no parece funcionar en IE 8, que es lo que mi código está optimizado para.

OriginalEl autor jason | 2013-05-24

1 Comentario

  1. 6

    Puede intentar esta

    $(".droppable1").droppable({   
                activeClass: "ui-state-hover",
                hoverClass: "ui-state-active",
                drop: function (event, ui) {
                    var drag_id = $(ui.draggable).attr("id");
                    var targetElem = $(this).attr("id");
                    deleteMe = true;            
                    $(this)
                      .addClass("ui-state-highlight")
                      .find("p")
                      .html("Dropped! inside " + targetElem);
    
                    $(ui.helper).remove(); //destroy clone
                    $(ui.draggable).remove(); //remove from list    
                }
            });

    Puede acceder a la actualidad elemento arrastrado y su clon el uso de la ui objeto declarado en su drop método.

    Gracias! Que lo hizo.
    Supongo que usted no sabe cómo animar el método de quitar no? Es que incluso posible?
    Sí, sí puede. Yo no puedo probarlo ahora mismo aunque. Pero intenta jugar con esto: $(interfaz de usuario.se pueden arrastrar).animate({ opacity: 0.4 }).remove(). O ir a jQuery animate() de la documentación. Usted va a aprender mucho a partir de allí..:)
    Es allí una manera de mantener la interfaz de usuario.ayudante de jQuery automáticamente quita que al final de arrastre?

    OriginalEl autor Jude Duran

Dejar respuesta

Please enter your comment!
Please enter your name here