Question

我的内部div假设用鼠标光标移动到mousemove但我希望它停在if语句中，如果它是用isDragging变量拖动所以它会顺利拖动但似乎没有停止任何建议和帮助不胜感激更新：jsFiddle

var yellow = $('#yellow');
var offset = yellow.offset();
var offsetWidth = offset.left + yellow.width();
var offsetHeight = offset.top + yellow.height();
var isDragging = false;

var red = $('#red');

$('#red').hide();

yellow.on('mousedown', function(event) {    
    $('#red').show();  
});
yellow.on('mouseup', function(event) {
    $('#red').hide();        
});
yellow.on('mousemove', function (e) {

    if(e.pageX > offset.left + ($(red).width() / 2) && e.pageX < offsetWidth - ($(red).width() / 2)
        && e.pageY > offset.top + ($(red).height() / 2) && e.pageY < offsetHeight - ($(red).height() / 2) && !isDragging ){
        red.css("left", e.pageX - $(red).width() / 2 );
        red.css("top", e.pageY - $(red).height() / 2);
    }

    $('#red').draggable(
        {'containment':'#yellow',
         start:function(event, ui) {
            isDragging = true;
        },
        drag:function(event, ui) {
            isDragging = true;
        },stop:function(event, ui) {
            isDragging = false;
        }
    });
});


<div id="yellow">
    <div id="red"></div>
</div>

    #yellow {
position: absolute;    
width: 250px; 
height: 250px; 
background-color: Yellow; 
}

#red {
position: absolute;
width: 100px; 
height: 100px; 
background-color: red; 
z-index: 100; 
}

Answer 1

我不能说我为这个解决方案感到骄傲，但它似乎完成了这些工作：

http://jsfiddle.net/pPn3v/42/

var yellow = $('#yellow');
var offset = yellow.offset();
var offsetWidth = offset.left + yellow.width();
var offsetHeight = offset.top + yellow.height();

var red = $('#red');

yellow.on('mousemove', function (e) {
    if(e.pageX+red.width() < offsetWidth
      && e.pageY+red.height() < offsetHeight){
        red.css("left", e.pageX);
        red.css("top", e.pageY);
    }
});

red.on('mousemove', function (e) {
    if(e.pageX+red.width() < offsetWidth
      && e.pageY+red.height() < offsetHeight){
        red.css("left", e.pageX);
        red.css("top", e.pageY);  
    }               
});

mousedown div包含父母（最新）

1 个答案: