Comment lancer la fonction de redimensionnement (glisser de la poignée de déclenchement) pour les éléments redimensionnables de l’interface utilisateur jQuery

Actuellement, création dynamic d’un élément redimensionnable sur mousedown lorsque je clique sur l’écran.

jQuery UI ajoute automatiquement des poignées pour permettre à l’utilisateur de cliquer et de faire glisser pour redimensionner l’élément par la suite.

Je voudrais déclencher la poignée de sorte que tant que l’utilisateur n’aura pas déclenché la mouseup il redimensionnera déjà le nouvel élément créé.

Je ne trouve rien dans la documentation qui montre quels événements sont déclenchés en cliquant sur ces descripteurs. J’ai essayé d’exécuter mousedown et de click sur la poignée une fois l’élément créé, placé à l’écran et défini comme resizable . Ni l’un ni l’autre n’a fonctionné.

Est-ce que quelqu’un sait comment déclencher le début de l’action de redimensionnement? Si quelqu’un sait comment enregistrer les événements de l’interface utilisateur jQuery, je peux également l’utiliser pour afficher les actions qui se produisent lorsque les descripteurs sont cliqués, suivent le même chemin et publient mes résultats ici.

Le violon dans la réponse de Michael L couvre l’essentiel, mais contient encore quelques bugs / limitations. Par conséquent, j’ajoute ma version modifiée ici comme réponse.

HTML

 

CSS

 #container { position: relative; width: 500px; height: 500px; background-color: #eee; } .block { position: absolute; width: 5px; height: 5px; background-color: red; opacity: 0.2; } 

JavaScript

 $("#container").on("mousedown", function(event){ if (event.target !== this) { return; } var $target = $(event.target), $block = $("
") .addClass("block") .css({ top: event.pageY - $target.offset().top, left: event.pageX - $target.offset().left }) .resizable() .draggable({ containment: $target }); $target.append($block); simulateHandleEvent($block, "se", event); }) function simulateHandleEvent($item, handle, event){ $item.find(".ui-resizable-" + handle) .sortinggger("mouseover") .sortinggger({ type: "mousedown", which: 1, pageX: event.pageX, pageY: event.pageY }); }

Découvrez ce JSFiddle

J’ai eu le même problème et finalement trouvé la réponse. Vous devez transmettre des informations supplémentaires à la fonction sortinggger() . Voir JS Fiddle .