Draggable div sans interface utilisateur jQuery

Comme le titre l’indique, j’essaie de faire un div draggable sans utiliser l’interface utilisateur jQuery.

Cependant, je suis coincé avec le code ci-dessous. Je comprends que je vais utiliser la position de la souris par rapport au conteneur div (dans lequel le div doit être glissé) et que je définirai le décalage par rapport à ces valeurs.

Je n’arrive pas à comprendre comment. Des indices pour moi?

Ce code ne fonctionne pas (bien sûr):

var X, Y; $(this).mousedown(function() { $(this).offset({ left: X, top: Y }); }); $("#containerDiv").mousemove(function(event) { X = event.pageX; Y = event.pageY; }); 

Voici un exemple très simple qui pourrait vous aider à démarrer:

 $(document).ready(function() { var $dragging = null; $(document.body).on("mousemove", function(e) { if ($dragging) { $dragging.offset({ top: e.pageY, left: e.pageX }); } }); $(document.body).on("mousedown", "div", function (e) { $dragging = $(e.target); }); $(document.body).on("mouseup", function (e) { $dragging = null; }); }); 

Exemple: http://jsfiddle.net/Jge9z/

Je comprends que je vais utiliser la position de la souris par rapport au conteneur div (dans lequel le div doit être glissé) et que je définirai le décalage par rapport à ces valeurs.

Pas si sûr de ça. Il me semble qu’en glisser-déposer, vous voudrez toujours utiliser le décalage des éléments par rapport au document.

Si vous voulez dire que vous voulez limiter le glissement à une zone particulière, c’est un problème plus compliqué (mais toujours réalisable).

Voici un autre code mis à jour:

 $(document).ready(function() { var $dragging = null; $('body').on("mousedown", "div", function(e) { $(this).attr('unselectable', 'on').addClass('draggable'); var el_w = $('.draggable').outerWidth(), el_h = $('.draggable').outerHeight(); $('body').on("mousemove", function(e) { if ($dragging) { $dragging.offset({ top: e.pageY - el_h / 2, left: e.pageX - el_w / 2 }); } }); $dragging = $(e.target); }).on("mouseup", ".draggable", function(e) { $dragging = null; $(this).removeAttr('unselectable').removeClass('draggable'); }); });​ 

Démo: http://jsfiddle.net/tovic/Jge9z/31/


J’ai créé un simple plugin pour ce sujet.

 // Simple JQuery Draggable Plugin // https://plus.google.com/108949996304093815163/about // Usage: $(selector).drags(); // Options: // handle => your dragging handle. // If not defined, then the whole body of the // selected element will be draggable // cursor => define your draggable element cursor type // draggableClass => define the draggable class // activeHandleClass => define the active handle class // // Update: 26 February 2013 // 1. Move the `z-index` manipulation from the plugin to CSS declaration // 2. Fix the laggy effect, because at the first time I made this plugin, // I just use the `draggable` class that's added to the element // when the element is clicked to select the current draggable element. (Sorry about my bad English!) // 3. Move the `draggable` and `active-handle` class as a part of the plugin option // Next update?? NEVER!!! Should create a similar plugin that is not called `simple`! (function($) { $.fn.drags = function(opt) { opt = $.extend({ handle: "", cursor: "move", draggableClass: "draggable", activeHandleClass: "active-handle" }, opt); var $selected = null; var $elements = (opt.handle === "") ? this : this.find(opt.handle); $elements.css('cursor', opt.cursor).on("mousedown", function(e) { if(opt.handle === "") { $selected = $(this); $selected.addClass(opt.draggableClass); } else { $selected = $(this).parent(); $selected.addClass(opt.draggableClass).find(opt.handle).addClass(opt.activeHandleClass); } var drg_h = $selected.outerHeight(), drg_w = $selected.outerWidth(), pos_y = $selected.offset().top + drg_h - e.pageY, pos_x = $selected.offset().left + drg_w - e.pageX; $(document).on("mousemove", function(e) { $selected.offset({ top: e.pageY + pos_y - drg_h, left: e.pageX + pos_x - drg_w }); }).on("mouseup", function() { $(this).off("mousemove"); // Unbind events from document if ($selected !== null) { $selected.removeClass(opt.draggableClass); $selected = null; } }); e.preventDefault(); // disable selection }).on("mouseup", function() { if(opt.handle === "") { $selected.removeClass(opt.draggableClass); } else { $selected.removeClass(opt.draggableClass) .find(opt.handle).removeClass(opt.activeHandleClass); } $selected = null; }); return this; }; })(jQuery); 

Démo: http://tovic.github.io/dte-project/jquery-draggable/index.html

Voici ma consortingbution:

http://jsfiddle.net/g6m5t8co/1/

        

voici un autre moyen de créer un object déplaçable centré sur le clic

http://jsfiddle.net/pixelass/fDcZS/

 function endMove() { $(this).removeClass('movable'); } function startMove() { $('.movable').on('mousemove', function(event) { var thisX = event.pageX - $(this).width() / 2, thisY = event.pageY - $(this).height() / 2; $('.movable').offset({ left: thisX, top: thisY }); }); } $(document).ready(function() { $("#containerDiv").on('mousedown', function() { $(this).addClass('movable'); startMove(); }).on('mouseup', function() { $(this).removeClass('movable'); endMove(); }); }); 

CSS

 #containerDiv { background:#333; position:absolute; width:200px; height:100px; } 

Faire glisser comme jQueryUI: JsFiddle

Vous pouvez faire glisser l’élément depuis n’importe quel point sans centrage bizarre.

 $(document).ready(function() { var $body = $('body'); var $target = null; var isDraggEnabled = false; $body.on("mousedown", "div", function(e) { $this = $(this); isDraggEnabled = $this.data("draggable"); if (isDraggEnabled) { if(e.offsetX==undefined){ x = e.pageX-$(this).offset().left; y = e.pageY-$(this).offset().top; }else{ x = e.offsetX; y = e.offsetY; }; $this.addClass('draggable'); $body.addClass('noselect'); $target = $(e.target); }; }); $body.on("mouseup", function(e) { $target = null; $body.find(".draggable").removeClass('draggable'); $body.removeClass('noselect'); }); $body.on("mousemove", function(e) { if ($target) { $target.offset({ top: e.pageY - y, left: e.pageX - x }); }; }); }); 

Aucune solution Jquery

Le code déplaçable le plus simple serait:

 Element.prototype.drag = function(){ var mousemove = function(e){ // document mousemove this.style.left = ( e.clientX - this.dragStartX ) + 'px'; this.style.top = ( e.clientY - this.dragStartY ) + 'px'; }.bind(this); var mouseup = function(e){ // document mouseup document.removeEventListener('mousemove',mousemove); document.removeEventListener('mouseup',mouseup); }.bind(this); this.addEventListener('mousedown',function(e){ // element mousedown this.dragStartX = e.offsetX; this.dragStartY = e.offsetY; document.addEventListener('mousemove',mousemove); document.addEventListener('mouseup',mouseup); }.bind(this)); } 

puis usage (non-jquery):

 document.querySelector('.target').drag(); 

ou en jquery:

 $('.target')[0].drag(); 

Remarque: l’élément déplacé doit avoir une position: absolue ou position: fixe appliquée à la gauche, mouvement supérieur au travail …

le codepen ci-dessous comporte des fonctionnalités plus avancées: dragStart, callbacks dragStop, classes css qui suppriment la sélection de texte des autres éléments lors du glissement et une fonctionnalité de repository également …

consultez le codepen suivant:

http://codepen.io/anon/pen/VPPaEK

Il s’agit essentiellement de définir un événement “mousedown” sur l’élément à déplacer, puis de lier et de délier le document mousemove pour gérer le mouvement.

Poignée déplaçable

afin de définir une poignée déplaçable pour l’élément

 Element.prototype.drag = function( setup ){ var setup = setup || {}; var mousemove = function(e){ // document mousemove this.style.left = ( e.clientX - this.dragStartX ) + 'px'; this.style.top = ( e.clientY - this.dragStartY ) + 'px'; }.bind(this); var mouseup = function(e){ // document mouseup document.removeEventListener('mousemove',mousemove); document.removeEventListener('mouseup',mouseup); }.bind(this); var handle = setup.handle || this; handle.addEventListener('mousedown',function(e){ // element mousedown this.dragStartX = e.offsetX; this.dragStartY = e.offsetY; document.addEventListener('mousemove',mousemove); document.addEventListener('mouseup',mouseup); }.bind(this)); } 

C’est à moi. http://jsfiddle.net/pd1vojsL/

3 boutons déplaçables dans un div, en les faisant glisser par div.

 

Nécessite JQuery (uniquement):

 $(function() { $('.button').mousedown(function(e) { if(e.which===1) { var button = $(this); var parent_height = button.parent().innerHeight(); var top = parseInt(button.css('top')); //current top position var original_ypos = button.css('top','').position().top; //original ypos (without top) button.css({top:top+'px'}); //restore top pos var drag_min_ypos = 0-original_ypos; var drag_max_ypos = parent_height-original_ypos-button.outerHeight(); var drag_start_ypos = e.clientY; $('#log1').text('mousedown top: '+top+', original_ypos: '+original_ypos); $(window).on('mousemove',function(e) { //Drag started button.addClass('drag'); var new_top = top+(e.clientY-drag_start_ypos); button.css({top:new_top+'px'}); if(new_topdrag_max_ypos) { button.css({top:drag_max_ypos+'px'}); } $('#log2').text('mousemove min: '+drag_min_ypos+', max: '+drag_max_ypos+', new_top: '+new_top); //Outdated code below (reason: drag contrained too early) /*if(new_top>=drag_min_ypos&&new_top<=drag_max_ypos) { button.css({top:new_top+'px'}); }*/ }); $(window).on('mouseup',function(e) { if(e.which===1) { //Drag finished $('.button').removeClass('drag'); $(window).off('mouseup mousemove'); $('#log1').text('mouseup'); $('#log2').text(''); } }); } }); }); 

Ce que j’ai vu ci-dessus est compliqué …..

Voici un code auquel on peut se référer.

 $("#box").on({ mousedown:function(e) { dragging = true; dragX = e.clientX - $(this).position().left; //To calculate the distance between the cursor pointer and box dragY = e.clientY - $(this).position().top; }, mouseup:function(){dragging = false;}, //If not set this on/off,the move will continue forever mousemove:function(e) { if(dragging) $(this).offset({top:e.clientY-dragY,left:e.clientX-dragX}); } }) 

En faisant glisser, glisser, glisser, vous pouvez placer la variable globale.

C’est un spectacle simple sur ce problème, mais il y a un bogue à propos de cette méthode.

Si c’est votre besoin maintenant, voici l’ exemple ici.

 $(document).ready(function() { var $startAt = null; $(document.body).live("mousemove", function(e) { if ($startAt) { $("#someDiv").offset({ top: e.pageY, left: $("#someDiv").position().left-$startAt+e.pageX }); $startAt = e.pageX; } }); $("#someDiv").live("mousedown", function (e) {$startAt = e.pageX;}); $(document.body).live("mouseup", function (e) {$startAt = null;}); }); 

Voici ma version simple.
La fonction draggable prend un object jQuery comme argument.

 /** * @param {jQuery} elem */ function draggable(elem){ elem.mousedown(function(evt){ var x = parseInt(this.style.left || 0) - evt.pageX; var y = parseInt(this.style.top || 0) - evt.pageY; elem.mousemove(function(evt){ elem.css('left', x + evt.pageX); elem.css('top', y + evt.pageY); }); }); elem.mouseup(off); elem.mouseleave(off); function off(){ elem.off("mousemove"); } } 

Voici une implémentation sans utiliser jQuery du tout –
http://thezillion.wordpress.com/2012/09/27/javascript-draggable-2-no-jquery

Intégrez le fichier JS (http://zillionhost.xtreemhost.com/tzdragg/tzdragg.js) dans votre code HTML et insérez le code suivant –

  

Et le code est également facile à apprendre.
http://thezillion.wordpress.com/2012/08/29/javascript-draggable-no-jquery