可拖動的框寬毛刺

Question

通常，我更喜歡為瑣碎的問題編寫自己的解決方案，因為通常插件會添加很多不必要的功能，並會增加項目的規模。 大小會使頁面變慢，並且在100k網頁瀏覽量/天的網站中，頁面差異會導致30k的差異（與可拖動的jQuery相比）會產生很大的不同。 我已經使用了jquery，我想這就是我現在所需要的，所以請不要告訴我使用另一個插件或框架來拖拉東西。

請記住，我編寫了以下代碼，以允許拖動框。 該代碼工作得很好（有關代碼本身的任何技巧將不勝感激），但我遇到了一些小毛病。

當我將框拖到瀏覽器的右邊緣限制時，出現水平滾動條，由於框的原因，窗口寬度變大了。 理想的行為是看不到水平滾動條，但允許像Windows窗口一樣將一部分框放在窗口區域之外。

有小費嗎？

CSS：

.draggable {
    position: absolute;
    cursor: move;
    border: 1px solid black;
}

使用Javascript：

$(document).ready(function() {
    var x = 0;
    var y = 0;
    $("#d").live("mousedown", function() {
        var element = $(this);
        $(document).mousemove(function(e) {
            var x_movement = 0;
            var y_movement = 0;
            if (x == e.pageX || x == 0) {
                x = e.pageX;
            } else {
                x_movement = e.pageX - x;
                x = e.pageX;
            }
            if (y == e.pageY || y == 0) {
                y = e.pageY;
            } else {
                y_movement = e.pageY - y;
                y = e.pageY;
            }
            var left = parseFloat(element.css("left")) + x_movement;
            element.css("left", left);
            var top = parseFloat(element.css("top")) + y_movement;
            element.css("top", top);
            return false;
        });
    });
    $(document).mouseup(function() {
        x = 0;
        y = 0;
        $(document).unbind("mousemove");
    });
});​

HTML：

<div id="d" style="width: 100px; left: 0px; height: 100px; top: 0px;" class="draggable">a</div>

Answer 1

對於一個簡單的解決方案，您可以將一些CSS添加到可拖動對象的容器中以防止滾動條。

body { overflow: hidden; }

jsFiddle： http : //jsfiddle.net/F894P/

Answer 2

代替這個：

$("#d").live("mousedown", function () {
 // your code here
}); // live

嘗試這個 ：

$("body").on("mousedown","#d", function(){
 // your code here
 $("#parent_container").css({"overflow-x":"hidden"});
 // or $("body").css({"overflow-x":"hidden"});
}); // on

#parent_container是可拖動對象的位置。

您應該使用jQuery 1.7+

從jQuery 1.7開始，不推薦使用.live()方法。 使用.on()附加事件處理程序。 較舊版本的jQuery的用戶應優先使用.delegate()而不是.live().