jQuery 1.4.2/jQuery UI droppable - remove(); problème avec Internet Explorer ou quelque chose de mal?

Question

J'utilise jQuery 1.4.2 (j est le .noConflict())/jQuery UI 1.8.5 et j'ai un problème avec le code suivant.

Cela fonctionne bien dans Chrome, FireFox et Safari, mais aucun dans Internet Explorer. L'alerte(); tire mais la ligne suivante (le remove();) non.

balisage XHTML:

<div class="mainarea"> 
    <div class="dnd"> 
     <div class="person dad"></div> 
     <div class="person mum"></div> 
    </div> 
</div> 

<div class="tools"> 
    <div class="person dad"></div> 
    <div class="person mum"></div> 
    <div class="person boy"></div> 
    <div class="person girl"></div> 
    <div class="bin"></div> 
</div> 

code Javascript:

j(document).ready(function(){ 

    // make the source item draggable 
    j('.tools .person').draggable({ 
     revert: "invalid", 
     helper: "clone" 
    }); 

    // the target drag n'drop area 
    j('.dnd').droppable({ 
      accept: ".tools > .person", 
      revert: "invalid", 
      activeClass: "active", 
      drop: function(event, ui) { 
       //copy from source and make it replaceable by another one 
       var obj = ui.draggable.clone().droppable({ hoverClass: "active", accept: ".tools .person" }); 

       // in case of replace 
       if(j(".dnd > .person.active").size()) 
        j(".dnd > .person.active").replaceWith(obj); 
       else // in case of new or limit reached 
        if((j(".dnd > .person.active").size() == 0) && (j(".dnd > .person").size() < 4)) 
         obj.appendTo('.dnd'); 
      } 
     }); 

    // the bin to delete the selected persons 
    j('.bin').droppable({ 
      accept: ".dnd > .person", 
      hoverClass: "active", 
      drop: function(event, ui) { 
          alert('debug'); 
       ui.draggable.remove(); 
      } 
     }); 

    // makes drag n'drop is sortable 
    j(".dnd").sortable({ placeholder: 'empty' }); 

    //helpers 
    j(".dnd").disableSelection(); 

}); 

quelqu'un peut me aider? Merci.

Answer 1

J'ai eu ce problème aussi - je ne pouvais pas supprimer l'élément de l'événement de baisse, mais je pouvais faire il forme l'événement d'arrêt des sortables (qui est viré en dernier). Voici donc une version corrigée de l'extrait original en haut. J'ai ajouté des événements start et stop au sortable, et un drapeau deleteMe qui est passé:

deleteMe = false; 

// make the source item draggable 
j('.tools .person').draggable({ 
    revert: "invalid", 
    helper: "clone", 

start: function(event, ui) { 
    deleteMe = false; 
} 
}); 

// the target drag n'drop area 
j('.dnd').droppable({ 
     accept: ".tools > .person", 
     revert: "invalid", 
     activeClass: "active", 
     drop: function(event, ui) { 
      //copy from source and make it replaceable by another one 
      var obj = ui.draggable.clone().droppable({ hoverClass: "active", accept: ".tools .person" }); 

      // in case of replace 
      if(j(".dnd > .person.active").size()) 
       j(".dnd > .person.active").replaceWith(obj); 
      else // in case of new or limit reached 
       if((j(".dnd > .person.active").size() == 0) && (j(".dnd > .person").size() < 4)) 
        obj.appendTo('.dnd'); 
     } 
    }); 

// the bin to delete the selected persons 
j('.bin').droppable({ 
     accept: ".dnd > .person", 
     hoverClass: "active", 
     drop: function(event, ui) { 
     deleteMe = true;        
     } 
    }); 

// makes drag n'drop is sortable 
j(".dnd").sortable({ placeholder: 'empty' , 
          stop: function(event, ui) { 
           if (deleteMe) {ui.item.remove()} 
          } }); 

//helpers 
j(".dnd").disableSelection(); 

Answer 2

Il semble fonctionner sur IE6, IE7 et IE8 (live example), avec ce code (seul ajout est l'appel draggable):

jQuery.noConflict(); 
jQuery(function(j) { 

    j('.dnd .person').draggable(); 
    j('.bin').droppable({ 
    accept: ".dnd .person", 
    cursor: "not-allowed", 
    hoverClass: "active", 
    drop: function(event, ui) { 
     alert('test'); 
     j(ui.draggable).remove(); 
    } 
    }); 
});​ 

Et ce balisage:

<div class='dnd'> 
    <span class='person'>person1</span> 
    <span class='person'>person2</span> 
</div> 
<div class='bin'></div> 

Alors le problème semble exister en dehors du code que vous avez cité. Peut-être que ce qui précède aidera. La création d'un exemple minimaliste et autonome est souvent utile dans environ 90-95% des cas. Vous êtes en train de comprendre ce qui ne va pas. L'autre 5-10%, vous obtenez une bonne chose autonome que vous pouvez publier sur StackOverflow ...