jQuery UI Droppable et Sortable - tomber dans l'emplacement de tri correct

Je travaille sur un projet où je suis en faisant glisser des éléments à partir d'un 3ème partie jQuery contrôle de jQuery sortable, en utilisant une combinaison de drop, et triable.

Cela fonctionne parfaitement bien, à l'exception de l'élément ajouté est toujours ajouté au bas de la liste triable, et vous devez le déplacer vers l'emplacement correct comme une étape distincte.

Est-il possible de l'élément ajouté à l'emplacement où vous l'avez déposé dans la liste?

Vous pouvez voir ce comportement dans le jQuery shopping carte droppable démo de ici. Voici une jsfiddle du même code. Lorsque vous ajoutez des éléments à partir des produits à votre panier en bas, il ajoute toujours à fond, même si vous goutte à proximité du sommet.

Voici le code jQuery:

     $(function () {
     $("#catalog").accordion();
     $("#catalog li").draggable({
         appendTo: "body",
         helper: "clone"
     });
     $("#cart ol").droppable({
         activeClass: "ui-state-default",
         hoverClass: "ui-state-hover",
         accept: ":not(.ui-sortable-helper)",
         drop: function (event, ui) {
             $(this).find(".placeholder").remove();
             $("<li></li>").text(ui.draggable.text()).appendTo(this);
         }
     }).sortable({
         items: "li:not(.placeholder)",
         sort: function () {
             $(this).removeClass("ui-state-default");
         }
     });
 });

source d'informationauteur AaronS

  1. 22

    utilisation droppable's drop de l'événement callback de comparer les current top offset position of the draggable helper avec le top offset de tous les éléments déjà présents ou déjà ajouté dans le droppable

    drop: function (event, ui) {

if($(this).find(".placeholder").length>0)  //add first element when cart is empty
{
    $(this).find(".placeholder").remove();
    $("<li></li>").text(ui.draggable.text()).appendTo(this);
}

else
{

    var i=0; //used as flag to find out if element added or not

    $(this).children('li').each(function()
    {
        if($(this).offset().top>=ui.offset.top)  //compare
       {
          $("<li></li>").text(ui.draggable.text()).insertBefore($(this));
          i=1;   
          return false; //break loop
       }
    })

    if(i!=1) //if element dropped at the end of cart
    {
        $("<li></li>").text(ui.draggable.text()).appendTo(this);
    }

}

}

    de la DÉMO AVEC le CODE

    PLEIN ÉCRAN DÉMO

  2. 17

    Qu'en faisant cela? En utilisant à la fois la connectToSortable ET connectWith options de marche, je pense. Il y a peut être un moyen plus malin pour cacher/afficher l'espace réservé, mais cela fonctionne bien.

    $(function () {
    $("#catalog").accordion();
    $("#catalog li").draggable({
        appendTo: "body",
        helper: "clone",
        connectToSortable: "#cart ol"
    });
    $("#cart ol").sortable({
        items: "li:not(.placeholder)",
        connectWith: "li",
        sort: function () {

            $(this).removeClass("ui-state-default");
        },
        over: function () {
            //hides the placeholder when the item is over the sortable
            $(".placeholder").hide(); 

        },
        out: function () {
            if ($(this).children(":not(.placeholder)").length == 0) {
                //shows the placeholder again if there are no items in the list
                $(".placeholder").show();
            }
        }
    });
});

    Le travail de Démonstration dans le Violon