jQuery UI Sortable-Comment puis-je annuler l'événement de clic sur un élément d'un glisser/trié?

Question

jQuery UI Sortable-Comment puis-je annuler l'événement de clic sur un élément d'un glisser/trié?

Demandé el 3 de Juin, 2009: Quand la question a-t-elle été
16385 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai un jQuery UI Sortable liste. La sortable éléments ont également un événement de clic ci-joint. Est-il possible d'empêcher l'événement click de tir après que j'ai faites glisser un élément?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head> 


  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>

  <script type="text/javascript" charset="utf-8">
    $().ready( function () { 

       $('#my_sortable').sortable({
         update: function() { console.log('update') },
         delay: 30
       });    


       $('#my_sortable li').click(function () {    
         console.log('click');
       });                        

     });
  </script>

  <style type="text/css" media="screen">
    #my_sortable li {
      border: 1px solid black;
      display: block;
      width: 100px;
      height: 100px;    
      background-color: gray;
    }
  </style>

</head>
<body>

      <ul id="my_sortable">                 
        <li id="item_1">A</li>
        <li id="item_2">B</li>
        <li id="item_3">C</li>
      </ul>   

</body>
</html>

Demandé el 3 de Juin, 2009 par Patrick McElhaney

Answer 1

5 Réponses

Answer 2

144voto

Elte Hupkes Points 1091

J'ai eu le même problème et depuis mon sortable éléments contenus de trois ou quatre éléments cliquables (et le nombre est variable) de liaison/déliaison à la volée n'a pas vraiment l'air d'une option. Cependant, par incident, j'ai spécifié l'

helper : 'clone'

option, qui se comportent à l'identique à l'original sortable en termes d'interface, mais ne semble pas le feu événements click sur l'élément déplacé et résout ainsi le problème. C'est autant un hack comme toute autre chose, mais au moins c'est court et facile..

Répondu el 4 de Juin, 2010 par Elte Hupkes (1091 Points )

Answer 3

13voto

Andrew Champion Points 519

Si vous avez une référence à l'événement click pour votre li, vous pouvez dissocier dans le triable méthode de mise à jour puis utiliser l'Événement/l'une pour relier. La propagation de l'évènement peut être arrêté avant de vous relier, la prévention de l'original de votre cliquez sur gestionnaire de tir.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head> 


  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>

  <script type="text/javascript" charset="utf-8">
    var myClick = function () {
        console.log('click');
    };

    $().ready( function () { 

       $('#my_sortable').sortable({
         update: function(event, ui) { 
            ui.item.unbind("click");
            ui.item.one("click", function (event) { 
                console.log("one-time-click"); 
                event.stopImmediatePropagation();
                $(this).click(myClick);
            }); 
            console.log('update') },
         delay: 30
       });    


       $('#my_sortable li').click(myClick);                        

     });
  </script>

  <style type="text/css" media="screen">
    #my_sortable li {
      border: 1px solid black;
      display: block;
      width: 100px;
      height: 100px;    
      background-color: gray;
    }
  </style>

</head>
<body>

      <ul id="my_sortable">                 
        <li id="item_1">A</li>
        <li id="item_2">B</li>
        <li id="item_3">C</li>
      </ul>   

</body>
</html>

Répondu el 3 de Juin, 2009 par Andrew Champion (519 Points )

Answer 4

2voto

Tom de Boer Points 386

$('.selector').draggable({
    stop: function(event, ui) {
        // event.toElement is the element that was responsible
        // for triggering this event. The handle, in case of a draggable.
        $( event.toElement ).one('click', function(e){ e.stopImmediatePropagation(); } );
    }
});

Cela fonctionne parce que "un des auditeurs sont licenciés avant "normal" des auditeurs. Donc, si un auditeur s'arrête la propagation, il n'atteindra jamais votre défini précédemment auditeurs.

Répondu el 20 de Décembre, 2012 par Tom de Boer (386 Points )

Answer 5

1voto

Marco Points 947

La réponse par mercilor travaillé pour moi un couple de mises en garde. L'événement de clic a été fait sur la poignée de l'élément plutôt que le tri élément lui-même. Malheureusement, l'interface utilisateur de l'objet, de ne pas vous donner une référence à la poignée de l'événement de mise à jour (demande de fonctionnalité de l'interface utilisateur de jquery?). J'ai donc dû obtenir le gérer moi-même. Aussi, j'ai dû appeler preventDefault ainsi pour arrêter l'action du clic.

update: function(ev, ui) {
    var handle = $(ui.item).find('h3');
    handle.unbind("click");
    handle.one("click", function (event) {
                            event.stopImmediatePropagation();
                            event.preventDefault();
                            $(this).click(clickHandler);
                        });
    // other update code ...

Répondu el 13 de Janvier, 2010 par Marco (947 Points )

Answer 6

1voto

ragnar Points 19

Plus facile, utilisez un var à savoir lorsque l'élément est en cours de tri...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head> 


  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>

  <script type="text/javascript" charset="utf-8">
    $().ready( function () {    
       $('#my_sortable').sortable({
         start: function() {
            sorting = true;
         },
         update: function() {
            console.log('update');
            sorting = false;
         },
         delay: 30
       });    


       $('#my_sortable li').click(function () {
         if (typeof(sorting) == "undefined" || !sorting) {
            console.log('click');
         }
       });                        

     });
  </script>

  <style type="text/css" media="screen">
    #my_sortable li {
      border: 1px solid black;
      display: block;
      width: 100px;
      height: 100px;    
      background-color: gray;
    }
  </style>

</head>
<body>

      <ul id="my_sortable">                 
        <li id="item_1">A</li>
        <li id="item_2">B</li>
        <li id="item_3">C</li>
      </ul>   

</body>
</html>

Répondu el 15 de Septembre, 2010 par ragnar (19 Points )

jQuery UI Sortable-Comment puis-je annuler l'événement de clic sur un élément d'un glisser/trié?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

jQuery UI Sortable-Comment puis-je annuler l'événement de clic sur un élément d'un glisser/trié?

Réponses

Questions connexes

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: