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 .