jQuery UI Multiples Drop glisser tout élément div & clone

J'ai juste commencé à l'aide de jQuery UI pour faire glisser les divs dans une des colonnes dans une table. J'ai un couple de différentes déplaçable divs avec différents arrière-plan, couleurs et texte à l'intérieur d'eux, et j'en ai besoin pour être en mesure de traînée jusqu'à la zone de largage comme un clone. Cela a bien fonctionné en utilisant jQuery UI l'exemple du panier le code, mais j'ai édité, donc l'ensemble de l'objet est déplacé au lieu de simplement le texte, mais cela élimine ensuite le clone de fonctionnalités pour une raison quelconque, même si j'ai helper:clone.

Voici mon code:

<script>
$(function() {
    $( "ul li" ).draggable({
        appendTo: "body",
        helper: "clone"});
    $( ".day #drag" ).draggable({
        appendTo: "body"});
    $( ".day" ).droppable({
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        accept: ":not(.ui-sortable-helper)",
        drop: function( event, ui ) {
            var targetElem = $(this).attr("id");

            $( this ).addClass( "ui-state-highlight" );
            $( ui.draggable ).appendTo( this );
        }
    }).sortable({
        items: "li:not(.placeholder)",
        sort: function() {
            $( this ).removeClass( "ui-state-default" );
        }
    });
});
</script>

Colonne exemple:

<td>
   <div id="monday" class="day monday ui-widget-content"></div>
</td>

Élément Draggable:

<li><div style="background-color:#<?=$bgColor?>;color:<?=$textColor?>;" id="drag" class="<?=$subject?>"><?=$row['name']?></div></li>

Il s'agit essentiellement d'un calendrier de l'outil d'installation. Je vous remercie pour l'aide

Ici est un jsFiddle pour référence: http://jsfiddle.net/x5T4h/

Je ne vois pas d'erreur. Je suis à vous aider si votre fournir un jsfiddle.net
Voici mon problème: jsfiddle.net/x5T4h merci
Votre violon travaille avec clone fonctionnalités, qu'attendez-vous?
Qu'entendez-vous par le clone fonctionnalités? L'opacité?
en I, en théorie, être en mesure de faire glisser chacun d'un nombre infini de fois, donc je pourrait avoir une colonne complète de l'anglais divs comme un exemple

OriginalL'auteur user1599318 | 2012-10-24

  1. 3

    Pas sûr que c'est exactement ce que vous voulez, mais ici, c'est un bon début pour votre : http://jsfiddle.net/x5T4h/2/

    En gros, j'ai enlevé le deuxième draggable objet de la déclaration, et j'ai ajouté clone de la fonction dupliquer votre élément à l'intérieur d' drop événement $( ui.draggable ).clone().appendTo( this );

    $(function() {
    $( "ul li" ).each(function(){
        $(this).draggable({
            helper: "clone"
        });
    });

    $( ".day" ).droppable({
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        accept: ":not(.ui-sortable-helper)",
        drop: function( event, ui ) {
            var targetElem = $(this).attr("id");
            $( ui.draggable ).clone().appendTo( this );
        }
    }).sortable({
        items: "li:not(.placeholder)",
        sort: function() {
            $( this ).removeClass( "ui-state-default" );
        }
    });
});​
    Oui c'est parfait, merci beaucoup. Vous ne voudriez pas passer à connaître sur le dessus de votre tête si il y a un moyen pour l'utilisateur de faire glisser les Divisions entre les colonnes (j'.e pour les réorganiser) et puis pour être en mesure de l'enlever complètement à partir d'une colonne en l'éloignant? Si non, c'est ok, ne vous inquiétez pas à ce sujet. Merci
    Il suffit d'appeler le déplaçable plugin sur l'élément cloné. Pour les retirer, mettre en place une autre cible de dépôt qui vérifie si l'élément est un clone, et si oui, supprime de la DOM.
    rompt avec 1.11.0, pouvez-vous me dire pourquoi il ne fonctionne que avec 1.8.3

    OriginalL'auteur sdespont