Utilisation de l'interface utilisateur jQuery par glisser-déposer: modification de l'élément déplacé lors de la suppression

Question

Lors de l'utilisation de jQuery UI draggables et les droppables, comment voulez-vous changer la faire glisser-déposer l'élément à déposer? Je suis en train de glisser un DIV à l'autre sortable DIV. Sur la chute, j'aimerais changer le cours a chuté de DIV et de modifier son innerHTML contenu.

Après la lecture de divers StackOverflow questions, mon code ressemble à ceci:

$(".column").droppable({
  accept: '.element-dragging', 
	drop: function(event, ui) {
		if ($(ui.draggable).hasClass("elemtxt")) {
			$(ui.draggable).replaceWith('<div class="element element-txt">This text box has been added!</div>');
		}
	}
})

Il ne fonctionne pas pour moi. :-(

Une copie intégrale de mon code est situé à http://www.marteki.com/jquery/bugkilling.php.

Answer 1

Prenez la totalité du code javascript à partir du lien que vous avez donné, vous pouvez le modifier comme suit pour le faire fonctionner:

$(function() {
    $(".elementbar div").draggable({
    	connectToSortable: '.column',
    	cursor: 'move',
    	cursorAt: { top: 0, left: 0 },
    	helper: 'clone',
    	revert: 'invalid'
    });
    $(".elementbar div, .elementbar div img").disableSelection();
    $(".column").sortable({
    	connectWith: '.column',
    	cursor: 'move', 
    	cursorAt: { top: 0, left: 0 }, 
    	placeholder: 'ui-sortable-placeholder',
    	tolerance: 'pointer',
    	stop: function(event, ui) {
    		if (ui.item.hasClass("elemtxt")) {
    			ui.item.replaceWith('<div class="element element-txt">This text box has been added!</div>');
    		}
    	}
    });
    $(".element").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all");
});

Il y avait un couple de questions:

1. La baisse de l'événement (que vous montrez dans votre question) n'était pas de tir parce que vous n'étiez pas accepting le contenu à droite.
2. Si vous avez à la fois .sortable & .droppable vous vous retrouvez avec bizarre double événements de tir. C'est inutile de toute façon, puisque vous pouvez effectivement saisir la baisse des cas de triable événements étant donné que vous avez lié avec le déplaçable.

Une autre chose à noter - il aurait été plus agréable d'utiliser le triable de l' receive événement à la place de stop (depuis l'arrêt obtient déclenché chaque fois qu'un tri s'arrête et la réception est précisément là pour le feu lorsque vous déposez un nouvel élément dans le tri de la liste), mais il ne fonctionne pas correctement parce que l' item n'a pas encore été ajouté à la liste triable, si vous n'êtes pas en mesure de le changer à ce point. Il fonctionne bien sur arrêter tout simplement parce que aucun des autres sortable les éléments ont la elemtxt classe.