Сделать DIV перетаскиваемым по экрану

Question

У меня есть нормальный DIV с атрибутами

div{ 
    height: 50px; 
    width: 50px; 
    background-color: red; 
} 

То, что я хочу, чтобы иметь возможность быть втянута. Перетаскивая, я имею в виду: до тех пор, пока ваша мышь нажата на div, она следует за вашей мышью, и когда вы отпускаете свою мышь, она остается в том положении, в которое вы ее отпустите.

Большое спасибо всем, кто может помочь!

http://jsfiddle.net/aritro33/k9DGH/

Answer 1

http://jsfiddle.net/k9DGH/9/

Есть некоторые JQuery (требует JQuery UI) :

$('div').draggable(); 

Answer 2

Быстрая и несколько грязных решение выходит что-то вроде следующего:

установки

Давайте html немного:

<div class='drag-container'> 
    <div class='draggable'></div> 
</div> 

Здесь я обернуваю ваш div в другой div, чтобы он мог установить position:relative. Вы можете установить это на body. Вы можете установить его в строке или в CSS, но, скорее всего, более естественно сделать это в коде.

var refx = 0, refy = 0, isdragging = false; 
$(".drag-container").css("position", "relative"); 
$(".draggable").css({left:0, top:0}) 
    .on("mousedown", function(evt) { 
    isdragging = true; 
    var src = $(event.target).closest('.draggable'); 
    refx = evt.pageX - parseInt(src.css("left")); 
    refy = evt.pageY - parseInt(src.css("top")); 
}).on("mousemove", function(evt){ 
    if(!isdragging) return; 
    var dx = evt.pageX - refx; 
    var dy = evt.pageY - refy; 
    console.log(dx, dy); 
    $(event.target) 
     .closest('.draggable') 
     .css({left:dx + "px", top: dy + "px"}); 
}).on("mouseup mouseout click dbclick mousein", function(){ 
    isdragging = false; 
}); 

Единственный странный бит здесь - много обработчиков для остановки перетаскивания. Я обнаружил, что большинство из них необходимы в некоторых случаях.

Вы можете увидеть предполагаемую функциональность в этом документе jsfiddle.