Question

http://output.jsbin.com/kulobolutu/

此链接包含我的代码的输出。我有一些div可以拖动一个div。你可以拖动它并与另一个碰撞。因此，我希望碰撞的div能够以一种不会离开屏幕并将其自身平稳地调整到另一个位置的方式向前移动一点。请帮助我，在这种情况下，我严重陷入这个任务。提前谢谢。

var overlaps = (function () {
    function getPositions( elem ) {
        var pos, width, height;
        pos = $( elem ).position();
        width = $( elem ).width();
        height = $( elem ).height();
        return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
    }

    function comparePositions( p1, p2 ) {
        var r1, r2;
        r1 = p1[0] < p2[0] ? p1 : p2;
        r2 = p1[0] < p2[0] ? p2 : p1;
        return r1[1] > r2[0] || r1[0] === r2[0];
    }

    return function ( a, b ) {
        var pos1 = getPositions( a ),
            pos2 = getPositions( b );
        return comparePositions( pos1[0], pos2[0] ) && comparePositions( pos1[1], pos2[1] );
    };
})();

function m() {
    var area = $( '#area' )[0],
        box = $( '#box0' )[0],
        html;

    html = $( area ).children().not( box ).map( function ( i ) {
      return '<p>Red box + Box ' + ( i + 1 ) + ' = ' + overlaps( box, this ) + '</p>';
    }).get().join( '' );

    $( '#result' ).html( html );


}

$('#box0').draggable({
  drag: function(){
    m();
  }
});

Answer 1

对于实时工作演示，请点击here

使用此javascript和css，它可以正常工作

var overlaps = (function () {
    function getPositions( elem ) {
        var pos, width, height;
        pos = $( elem ).position();
        width = $( elem ).width();
        height = $( elem ).height();
        return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
    }

    function comparePositions( p1, p2 ) {
        var r1, r2;
        r1 = p1[0] < p2[0] ? p1 : p2;
        r2 = p1[0] < p2[0] ? p2 : p1;
        return r1[1] > r2[0] || r1[0] === r2[0];
    }

    return function ( a, b ) {
        var pos1 = getPositions( a ),
            pos2 = getPositions( b );
        return comparePositions( pos1[0], pos2[0] ) && comparePositions( pos1[1], pos2[1] );
    };
})();

function m() {
    var area = $( '#area' )[0],
        box = $( '#box0' )[0],
        html;

    html = $( area ).children().not( box ).map( function ( i ) {
    if(overlaps( box, this )){
      $("#box" + (i+1)).addClass("overlapped"); 
      }
      return '<p>Red box + Box ' + ( i + 1 ) + ' = ' + overlaps( box, this ) + '</p>';


    }).get().join( '' );

    $( '#result' ).html( html );


}

$('#box0').draggable({
  drag: function(){
    $(".overlapped").removeClass("overlapped");
    m();
  }
});

将这些行添加到Css

.overlapped{
  border:1px solid red;
}

Answer 2

html5和css3具有div“转换”属性，可以轻松地执行您需要的操作。这里有一些文档https://www.w3schools.com/cssref/css3_pr_transform.asp

将类添加到正在冲突的div

2 个答案: