Déplaçable div sans jQuery UI

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 plugin simple pour ce fil.

//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 une autre façon de faire un déplaçable objet qui est centré sur le cliquez sur

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;
}

Pas De Jquery Solution De Base

Les plus élémentaires déplaçable code 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));
this.style.position = 'absolute' //fixed might work as well
}

et puis l'utilisation de la (non-jquery) :

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

ou en jquery :

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

Avis : l'élément traîné devrait avoir un position:absolute ou position:fixed appliqué pour la gauche,en haut du mouvement au travail...

la codepen ci-dessous il a plus de fonctionnalités "avancées": dragStart, dragStop rappels, les classes css ajoutant à supprimer de la sélection de texte d'autres éléments lors d'un déplacement, et une baisse de la fonction...

la caisse de l'suivantes codepen :

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

de son fond de définition d'un 'mousedown' événement sur l'élément qui doit être déplacé, et puis de liaison et de déliaison le document mousemove pour gérer le mouvement.

Déplaçable Poignée

afin de définir un déplaçable poignée de 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);
handle.classList.add('dragging');
}.bind(this)); 
handle.classList.add('draggable');
this.style.position = 'absolute' //fixed might work as well
}

Le code ci-dessus est utilisé comme suit :

var setup = {
handle : document.querySelector('.handle')
};
document.querySelector('.box').drag(setup);

L'ajout de CSS pour éliminer sélectionnable

Le problème, c'est que maintenant lorsque vous faites glisser le texte à l'intérieur de l'élément déplaçable est gênant d'être sélectionné à la non-utilisation...

C'est pourquoi, nous avons ajouté la draggable et dragging classes de l'élément. qui va annuler ce comportement indésirable, et aussi d'ajouter un curseur de déplacement, pour l'affichage de cet élément déplaçable

.draggable{
cursor: move;
position: fixed;
}
.draggable.dragging{
user-select: none;
}

Ajout D'Événements

Alors, maintenant que nous avons notre élément déplaçable, nous avons parfois besoin de faire appel à divers événements.

setup.ondraginit  //this is called when setting up the draggable
setup.ondragstart //this is called when mouse is down on the element
setup.ondragend   //this is called when mouse is released (after dragging)
setup.ondrag      //this is called while the element is being dragged

Chaque va passer la souris événement pour le gestionnaire spécifique

Enfin, c'est ce que nous obtenons...

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';
setup.ondrag && setup.ondrag(e); //ondrag event
}.bind(this);
var mouseup = function(e){ //document mouseup
document.removeEventListener('mousemove',mousemove);
document.removeEventListener('mouseup',mouseup);
handle.classList.remove('dragging');
setup.ondragend && setup.ondragend(e); //ondragend event
}.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);
handle.classList.add('dragging');
setup.ondragstart && setup.ondragstart(e); //ondragstart event
}.bind(this)); 
handle.classList.add('draggable');
setup.ondraginit && setup.ondraginit(e); //ondraginit event
}

Et d'utiliser cette :

var setup = {
handle      : document.querySelector('.handle'),
ondragstart : e => { console.log('drag has started!'); },
ondrag      : e => { console.log('drag!'); },
ondragend   : e => { console.log('drag has ended!'); }
};
document.querySelector('.box').drag(setup);

noter que e.target est une référence à notre déplaçable élément

Ce que j'ai vu ci-dessus est compliquer.....

Voici un peu de code peuvent 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});
}
})

glisser,dragX,dragY peut placer la variable globale.

C'est un simple spectacle sur ce problème,mais il y a certains bug sur cette méthode.

Si c'est votre besoin maintenant,voici la Exemple ici.

Voici ma version simple.

La fonction draggable prend un objet 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");
}
}