Javascript Girl
  1. Javascript Girl
  3. Jquery draggable droppable supprimer abandonné
Intereting Posts
Magento :: Traduire le texte des fichiers javascript Highcarts piechart redessiner avec animation après setData () Javascript Promise Pattern – différencier l'erreur Création d'un objet json avec des variables Comment analyser HTML de JavaScript dans Firefox? La déclaration de variable est-elle nécessaire dans la boucle? La requête AngularJS $ http a échoué avec l'en-tête personnalisé (allumée en CORS) Math.min.apply (0, array) – pourquoi? Suppression de marqueurs dans google Maps Places Services Syntaxe étrange des méthodes Number en JavaScript Redimensionner automatiquement la zone de texte en fonction du contenu Contrôle audio – vers l'arrière, boutons avant – script Java Comment puis-je empêcher l'interférence CSS dans un morceau injecté de HTML? Quels scripts modernisateurs existent pour les nouvelles fonctions ECMAScript 5? Comment vérifiez-vous une chaîne vide dans JavaScript?

Jquery draggable droppable supprimer abandonné

Comment supprimer l'article du panier?

Naturellement, vous voudriez pouvoir faire glisser et déposer l'élément. 

$(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(); $( " " ).text( ui.draggable.text() ).appendTo( this ); } }).sortable({ items: "li:not(.placeholder)", sort: function() { // gets added unintentionally by droppable interacting with sortable // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options $( this ).removeClass( "ui-state-default" ); } }); }); 
  •  
    •  $(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(); $( " " ).text( ui.draggable.text() ).appendTo( this ); } }).sortable({ items: "li:not(.placeholder)", sort: function() { // gets added unintentionally by droppable interacting with sortable // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options $( this ).removeClass( "ui-state-default" ); } }); });

    Cela devrait fonctionner: 

     $(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()) .addClass("cart-item") .appendTo(this); } }).sortable({ items: "li:not(.placeholder)", sort: function() { $(this).removeClass("ui-state-default"); } }); $("#catalog ul").droppable({ drop: function(event, ui) { $(ui.draggable).remove(); }, hoverClass: "ui-state-hover", accept: '.cart-item' }); });

    Notes :

    • Lorsqu'un article est déposé sur la zone du panier, j'ai ajouté une classe d' cart-item de cart-item au nouvel élément.
    • J'ai fait le catalogue ul droppable; Cette zone n'accepte que l' cart-item s. Il appelle remove() pour supprimer un article du panier une fois que la baisse est survenue.

    Voyez-le travailler ici: http://jsfiddle.net/andrewwhitaker/t97FE/embedded/result/

    Vous pouvez faire glisser un article du panier vers n'importe quelle catégorie du catalogue, mais je pense qu'il serait très facile de rendre les articles uniquement glissants dans leurs catégories d'origine.