jQuery Girl
  1. jQuery Girl
  3. faire glisser les éléments en fonction du pourcentage vers l’élément de confinement
Intereting Posts
Changer le format de date javascript API Google Maps v3: transmission d’une image pour symbolPath plutôt que d’un symbole intégré JavaScript: chargez une image à partir de javascript, puis attendez l’événement «load» de cette image. jQuery – Comment afficher / masquer une zone de texte en fonction du menu déroulant sélectionné Jquery Tablesorter – sortinge par colonne ayant des éléments Empêcher la fonction de se déclencher deux fois lorsqu’elle est liée à la saisie du focus et au clic Détection de la tablette Windows (appareils Windows tactiles) avec Jquery Désactiver des dates spécifiques dans jQuery Comment exécuter une fonction JavaScript lorsque l’utilisateur visite un lien de hachage (# quelque chose) à l’aide de JQuery? Comment transformer jQuery each () en boucle javascript normale Problème asynchrone dans Google Geocoder Sélectionnez 2 version 4.0 permet à l’utilisateur d’entrer du texte libre Erreur Ajax LARAVEL 419 POST redactor.js pastePlainText – mais nécessite un bouton pour coller le code HTML à la place Comment append un symbole plus moins à un accordéon bootstrap

faire glisser les éléments en fonction du pourcentage vers l’élément de confinement

Voici à quoi cela ressemble; 

$( "#box ul li" ).draggable({ helper: "clone" }); $( ".item" ).draggable({containment: ".door"}); $( ".door" ).droppable({ accept: ":not(.ui-sortable-helper, .item)", drop: function( event, ui ) { $( "
" ).html(ui.draggable.find("img")).appendTo(this); } });

L’utilisateur fait glisser l’élément $ (“#box ul li”) et le dépose sur l’élément $ (“. Door”). Et il l’ajoute à l’élément $ (“. Door”) avec le sélecteur $ (“. Item”).

J’utilise jquery UI – Draggable pour faire glisser des éléments. Il n’y a pas de problème là-bas.

Voici la vraie question.

Mais lorsque vous commencez à faire glisser l’élément, la fonction modifie les positions gauche et supérieure de l’élément, comme ceci: en haut: 10px à gauche: 10px . Mais je veux faire glisser l’élément basé sur le pourcentage dans l’élément de confinement. Il devrait être top: 10%; à gauche: 10% .

une idée sur comment faire cela?

J’ai trouvé une solution 

 $( ".item" ).draggable({ containment: ".door", stop: function( event, ui ) { $(this).css("left",parseInt($(this).css("left")) / ($(".door").width() / 100)+"%"); $(this).css("top",parseInt($(this).css("top")) / ($(".door").height() / 100)+"%"); } });

Essayez ce code: 

 $( ".element" ).draggable({ stop: function (){ var l = ( 100 * parseFloat($(this).css("left")) / parseFloat($(this).parent().css("width")) )+ "%" ; var t = ( 100 * parseFloat($(this).css("top")) / parseFloat($(this).parent().css("height")) )+ "%" ; $(this).css("left" , l); $(this).css("top" , t); } });

Petite version mise à jour de tout ce qui précède: 

 $('.element').draggable({ containment: 'parent', stop: function( event, ui ) { var $elm = $(this); var pos = $elm.position(), parentSizes = { height: $elm.parent().height(), width: $elm.parent().width() }; $elm.css('top', ((pos.top/parentSizes.height) * 100) + '%').css('left', ((pos.left/parentSizes.width) * 100) + '%'); }});