Geek asks and answers

An inner div that can be dragged vertically should allow the parent div to wrap horizontally

I have an outer div and an inner div. The inner div can be dragged vertically, and the outer div can be dragged horizontally. I did it ( http://jsfiddle.net/27Nh2/ )

Now I also want the outer div to be moved horizontally if the user tries to drag the inner div horizontally. The inner div should remain where it is inside the outer div, and the outer div horizontally.

The problem is that I'm trying to drag the inner div horizontally, nothing is being dragged.

<div class="slides">
    Outer - only drag horizontally
    <div class="slide">
        Inner - only drag vertically
    </div>
</div>

.slides {
    margin:20px;
    background-color:#aaa;   
    cursor:pointer;
    width:200px;
    height:100px;
}
.slide {
    width:100px;
    height:200px;
    margin:20px;
    background-color:#ccc;
}

$(".slides").draggable({
    axis:"x",
});
$(".slide").draggable({
    axis:"y",
});
+3
source share
3 answers

, . , , .

-

JS:

$(".slides").draggable({
    axis:"x",
});

$('.slide').hover(
    function () {
        $('.slides').draggable({axis:'y'});
    },function () {
        $('.slides').draggable({axis:'x'});
    });
+1

. , div x, y, handle, div, div :

<div class="slides">
<div class="slide">
    <p id="hd" style="border:2px solid;">Vertical</p>
    Hello World (horizontal)
</div>


$(".slides").draggable({
    axis:"x",
});
$(".slide").draggable({
    axis:"y",
    handle:"p"
});

Fiddle

+2

(badAdviceGuy), , , .

div /, div, /.

.

jsFiddle (http://jsfiddle.net/27Nh2/52/)

var left = 0;
$(".outer").draggable({
    axis:"x",
    drag: function( event, ui ) {
        left = ui.position.left;
        $('#msg').html(ui.position.left);
    }
});
$(".inner").draggable({
    axis:"y",
    drag: function( event, ui ) {
        $('#msg').html(left + ui.position.left);
        $(".outer").css("left", left + ui.position.left);
    },
    stop : function(event, ui) {
        left = ui.position.left;
    }
});
0

More articles:


All Articles