9
votes

Glisser des éléments sur une div

J'ai essayé d'utiliser la dragge intégrée de JQuery et j'ai essayé d'utiliser des fonctions de traînée personnalisées sans en profit. Tous deux ont leurs problèmes respectés et je vais essayer de mettre en évidence les deux.

Fondamentalement, j'essaie d'autoriser le glissement d'un élément qui se trouve sur un conteneur divisé. Les méthodes suivantes fonctionnent ok em> sur un élément échelonné inférieur à celui de 2 code>. Mais si vous allez plus haut que cela, nous voyons des problèmes. P>

Toute aide serait appréciée. Merci pour votre temps. P>

HTML STRY> P>

(function ($) {
    $.fn.drags = function (opt) {

        opt = $.extend({
            handle: "",
            cursor: "move"
        }, opt);

        if (opt.handle === "") {
            var $el = this;
        } else {
            var $parent = this;
            var $el = this.find(opt.handle);
        }

        return $el.css('cursor', opt.cursor).on("mousedown", function (e) {
            if (opt.handle === "") {
                var $drag = $(this).addClass('draggable');
            } else {
                $(this).addClass('active-handle')
                var $drag = $parent.addClass('draggable');
            }

            var
            drg_h = $drag.outerHeight(),
                drg_w = $drag.outerWidth(),
                pos_y = $drag.offset().top + drg_h - e.pageY,
                pos_x = $drag.offset().left + drg_w - e.pageX;

            follow = function (e) {
                $drag.offset({
                    top: e.pageY + pos_y - drg_h,
                    left: e.pageX + pos_x - drg_w
                })
            };

            $(window).on("mousemove", follow).on("mouseup", function () {
                $drag.removeClass('draggable');
                $(window).off("mousemove", follow);
            });

            e.preventDefault(); // disable selection

        }).on("mouseup", function () {
            if (opt.handle === "") {
                $(this).removeClass('draggable');
            } else {
                $(this).removeClass('active-handle');
                $parent.removeClass('draggable');
            }
        });

    }
})(jQuery);

$("#dragme").drags({}, function (e) {});
  • la plus grande préoccupation forte>: le conteneur dressé ne change pas quand il est intensifié. Donc, si l'élément est traîné sur une partie du récipient à l'échelle qui ne fait pas partie de sa taille d'origine, cela échouera. Li>
  • Lorsque vous cliquez pour faire glisser un div, il se téléporte un peu loin de la souris et n'est pas un sans couture em> glisser. li> ul>

    js strud> p> xxx pré>


    Méthode 2 - Fonction de glisser-commande h2>

    i J'ai essayé d'utiliser une fonction de glisser personnalisée, mais il est inutilisable après autour d'une balance code> 2 code>. p>

    • jsfiddle sur un échelle (2) code> - on dirait que la Div Draggable est avoir une crise. li>
    • jsfiddle sur un échelle (2.5) code> - La Div Draggable s'envole quand Vous essayez de le glisser. li> ul>

      JS strud> p> xxx pré> p>


4 commentaires

essayez-vous de faire une fonction de traînée personnalisée? Jquery-Ui a déjà une fonction draggible.


J'ai testé votre code avec quelques entrées à l'échelle. Cela semble comme une fois qu'il frappe environ 1,75, il commence à scintiller et sauter comme vous le suggérez. Tout ce qui est ci-dessous semble faire glisser très bien.


J'ai pris la liberté de mettre à jour votre Jsfiddle aussi bien pour pouvoir suivre la position et la taille. Je vais essayer quelques autres choses, mais je pense que cela peut être un problème connexe de navigateur.


Vérifiez cette réponse Stackoverflow.com/questions/19787104/...


3 Réponses :


1
votes

Un problème similaire est mentionné ici: jQuery - CSS "Transform: échelle" affecte ".Offset () 'de jQuery

Il semble que le problème découle du fait que JQuery ne renvoie pas la taille exacte pour les éléments à l'échelle et, par conséquent, définissez les valeurs de décalage de droite à l'élément. P> Pour résoudre ce problème, il suggère d'abord l'échelle de réglage sur 1 et le réglage de décalage puis de réinitialiser la valeur d'échelle. p>

mais cela seul ne résoud pas le problème ici. Étant donné que la position de la souris est prise pendant sa mise à l'échelle, les valeurs de position doivent également être divisées par la valeur de l'échelle. P>

Voici une version modifiée du code: P>

  var scl = 2.5;
  var
    drg_h = $drag.outerHeight(),
    drg_w = $drag.outerWidth(),
    pos_y = $drag.offset().top/scl + drg_h - e.pageY/scl,
    pos_x = $drag.offset().left/scl + drg_w - e.pageX/scl;

  follow = function(e) {
    var size = {
      top:e.pageY/scl + pos_y - drg_h+scl*2,
      left:e.pageX/scl + pos_x - drg_w+scl*2
    };
      $drag.parent().css("transform","scale(1)");
      $drag.offset(size);
      $drag.parent().css("transform","scale("+scl+")");
  };


3 commentaires

Wow, c'est un excellent travail! Merci pour ça. J'ai un cas d'utilisation similaire que j'ai essayé de faire fonctionner cela. Je sais que ce n'était pas la question envisagée, mais je me demandais si cela ne me dérangeait pas de jeter un coup d'œil et de voir ce que je pouvais faire pour que cela fonctionne pour que cela fonctionne sous ce genre d'environnement mis à l'échelle avec son parent, pas celui étant mis à l'échelle. Je l'ai édité un TAD et cela fonctionne légèrement, mais se téléporte toujours un peu.


Il semble être lié aux valeurs de marge et de rembourrage, car elles sont également prises en calcul de la position du curseur. Pour faire un chèque rapide, j'ai ajouté après CSS: Corps, .Trimspace, .FormContainer, # Formbox {Marge: 0PX! IMPORTANT; PADING: 0PX! IMPORTANT; } et il fonctionne bien. Voici Fiddle


Hmm, je suppose qu'il n'y a pas de solution facile.



-1
votes

Voici un exemple de glisser simple avec la mise à l'échelle, cependant, à Prue Dom. XXX


2 commentaires

De ma question, vous pouvez voir que ce n'était pas la réponse que je cherche, mais même si vous n'avez donné aucun effort pour me montrer même comment je ferais cela sur un conteneur à la score


Le DIV se déplace dans un récipient à l'échelle qui a été mis à l'échelle de 2 en X et Y coordonnées. L'exemple fonctionne parfaitement bien dans IE11, Firefox et Chrome à n'importe quelle échelle. En fait, c'est très simple, si le parent a échoué, le mouvement, ici, j'utilise ici E.ClientX sur mesure, de la cible de traînée doit être divisée par m.



5
votes

Voici quelques-unes de mes conclusions pour vous assurer que vous faites glisser sur un conteneur mis à l'échelle fonctionne pour Méthode une . La seule mise en garde consiste à vous assurer que vous avez var cent comme le pourcentage mis à l'échelle déclarée avant que l'une de ces actions se produise.

Tout d'abord, utilisez ce code en haut de votre JavaScript. Ce wil aide à s'assurer que la zone dressée fonctionne avec un conteneur saclé. xxx

Voici quelques fonctions nécessaires pour résoudre le glisser de sorte qu'il fonctionne sur un conteneur à l'échelle. xxx

Vous le souhaitez si vous souhaitez activer l'élément à redimensionner sur un conteneur à l'échelle. xxx

pour faire un élément glissant, j'utilise la fonction suivante. xxx


1 commentaires

C'est parfait. Merci!