2

jquery ui ライブラリを使用せずに div をドラッグ可能にしましたが、コンテナを離れないように、ドラッグ可能なボックスを作成したいと考えています。

これが私のデモです

$(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", ".box", function (e) {
        $dragging = $(e.target);
    });

    $(document.body).on("mouseup", function (e) {
        $dragging = null;
    });
});​

これを行う方法？注意してください、私はJQUERY UIを使用していません。

4

1 に答える 1

1

それを確認してください...

  • ボックスの左位置がコンテナーの左位置より大きく、
  • ボックスの右の位置(左の位置 + ボックスの幅)がコンテナーの右の位置より小さく、
  • ボックスの上部の位置がコンテナの上部の位置より大きく、
  • ボックスの下部の位置(上部の位置 + ボックスの高さ)がコンテナーの下部の位置よりも小さい

http://jsfiddle.net/KdehU/2/

$(document).ready(function() {
    var $dragging = null;

    var container = $('#container'),
        c_t = container.offset().top,
        c_l = container.offset().left,
        c_b = c_t + container.height(),
        c_r = c_l + container.width();

    $(document.body).on("mousemove", function(e) {
        if ($dragging) {
            var width = $dragging.width();
            var height = $dragging.height();

            var new_y = (e.pageY > c_t && (e.pageY + height) < c_b) ? e.pageY : undefined;
            var new_x = (e.pageX > c_l && (e.pageX + width) < c_r) ? e.pageX : undefined;

            $dragging.offset({
                top: new_y,
                left: new_x
            });
        }
    });

    $(document.body).on("mousedown", ".box", function (e) {
        $dragging = $(e.target);
    });

    $(document.body).on("mouseup", function (e) {
        $dragging = null;
    });
});
于 2012-04-20T02:07:47.473 に答える