【发布时间】：2009-02-18 16:34:23
【问题描述】：
我需要能够用鼠标移动 div 并将 div 的新位置存储在数据库中以记住显示。我该怎么做？
【问题讨论】：
标签： javascript jquery html dom
【发布时间】：2009-02-18 16:34:23
【问题描述】：
我强烈建议您研究jQuery UI 和可拖动的交互。基本上，您需要将代码添加到您的可拖动 div（假设它具有 id="draggable"）：
$("#draggable").draggable();
然后，将您的必要行为放在停止事件中。更具体地说，你会这样做：
$('#draggable').draggable({
stop: function(event, ui) { ... }
});
关于数据库存储，可以在上述函数中使用 AJAX 调用，也可以将其存储在页面中，这样一些表单发送或其他操作会导致将位置信息传递给服务器并存储与其他数据一致。我会小心使用 AJAX 调用，因为您可能会在每个浏览器上每次拖动时用位置数据轰炸您的数据库。取决于您的应用...
【讨论】：
-
是的，如果您不想弄乱浏览器测试和所有这些废话，这是最好的选择。 +1 来自我 ;)
这是我刚刚编写的一个小 jQuery 函数，让您可以仅使用 jQuery 而不是使用 jQuery UI 来拖动 div。
/* PlugTrade.com - jQuery draggit Function */
/* Drag A Div with jQuery */
jQuery.fn.draggit = function (el) {
var thisdiv = this;
var thistarget = $(el);
var relX;
var relY;
var targetw = thistarget.width();
var targeth = thistarget.height();
var docw;
var doch;
thistarget.css('position','absolute');
thisdiv.bind('mousedown', function(e){
var pos = $(el).offset();
var srcX = pos.left;
var srcY = pos.top;
docw = $('body').width();
doch = $('body').height();
relX = e.pageX - srcX;
relY = e.pageY - srcY;
ismousedown = true;
});
$(document).bind('mousemove',function(e){
if(ismousedown)
{
targetw = thistarget.width();
targeth = thistarget.height();
var maxX = docw - targetw - 10;
var maxY = doch - targeth - 10;
var mouseX = e.pageX;
var mouseY = e.pageY;
var diffX = mouseX - relX;
var diffY = mouseY - relY;
// check if we are beyond document bounds ...
if(diffX < 0) diffX = 0;
if(diffY < 0) diffY = 0;
if(diffX > maxX) diffX = maxX;
if(diffY > maxY) diffY = maxY;
$(el).css('top', (diffY)+'px');
$(el).css('left', (diffX)+'px');
}
});
$(window).bind('mouseup', function(e){
ismousedown = false;
});
return this;
} // end jQuery draggit function //
jQuery 函数甚至可以防止 div 越界。基本上，您将它附加到您注定要成为拖动激活器的 div（例如标题栏）。调用它就这么简单：
$("#titleBar").draggit("#whatToDrag");
所以#titleBar 将是您的标题栏 div 的 id，而 #whatToDrag 将是您要拖动的内容的 id。对于混乱的代码，我深表歉意，我只是修改了它，并认为它可以为您提供 jQuery UI 的替代方案，同时仍使其易于实现。
【讨论】：
-
doch 应该使用 $(window).height() 而不是 $('body') 因为 body 仅与填充它的内容一样高，也许不是整个窗口。或者，如果 body 高于窗口，如果您想以某种方式将 draggit 放在窗口视图下方，则可能使用 body。但无论如何都很棒！
-
正是我想要的。除了 @Alendri 所说的，
thistarget.width()和thistarget.height()应该使用outerWidth()和outerHeight()来补偿目标上的填充。
如果有很多对象，那么 mousemove 会变得很昂贵。解决它的一个步骤是在 mousedown 上绑定处理程序并在 mouseup 上取消绑定。但是，此示例并未使用多个对象编写和测试；特别是，当前的解除绑定解除了之前绑定的所有内容（可以通过命名 lambda 表达式并在解除绑定中引用该名称来解决）。
jQuery.fn.dragdrop = function (el) {
this.bind('mousedown', function (e) {
var relX = e.pageX - $(el).offset().left;
var relY = e.pageY - $(el).offset().top;
var maxX = $('body').width() - $(el).width() - 10;
var maxY = $('body').height() - $(el).height() - 10;
$(document).bind('mousemove', function (e) {
var diffX = Math.min(maxX, Math.max(0, e.pageX - relX));
var diffY = Math.min(maxY, Math.max(0, e.pageY - relY));
$(el).css('left', diffX + 'px').css('top', diffY + 'px');
});
});
$(window).bind('mouseup', function (e) {
$(document).unbind('mousemove');
});
return this;
};
$(document).ready(function () {
return $('#obj').dragdrop('#obj');
});
或者在Parenscript中：
(setf (chain j-query fn dragdrop)
(lambda (el)
(chain this
(bind :mousedown
(lambda (e)
(let ((rel-x (- (chain e page-x) (chain ($ el) (offset) left)))
(rel-y (- (chain e page-y) (chain ($ el) (offset) top)))
(max-x (- (chain ($ :body) (width)) (chain ($ el) (width)) 10))
(max-y (- (chain ($ :body) (height)) (chain ($ el) (height)) 10)))
(chain ($ document)
(bind :mousemove
(lambda (e)
(let ((diff-x (min max-x (max 0 (- (chain e page-x) rel-x))))
(diff-y (min max-y (max 0 (- (chain e page-y) rel-y)))))
(chain ($ el) (css :left (+ diff-x :px)) (css :top (+ diff-y :px)))))))))))
(chain ($ window)
(bind :mouseup
(lambda (e)
(chain ($ document)
(unbind :mousemove)))))
this))
【讨论】：