2016-08-10 4 views
0

Ich kann die Seitenleiste nicht nach links oder rechts ziehen. Ich möchte die Seitenleiste vergrößern und verkleinern, wenn sie nach rechts und links gezogen wird. Wenn ich versuchte, die Breite der Seitenleiste zu vergrößern oder zu verkleinern, blieb sie gleich. Es gab keine Änderungen darin.Wie ziehe ich die Sidebar?

var i = 0; 
 
$('#dragbar').mousedown(function(e) { 
 

 
    e.preventDefault(); 
 
    $('#mousestatus').html("mousedown" + i++); 
 
    $(document).mousemove(function(e) { 
 
    $('#position').html(e.pageX + ', ' + e.pageY); 
 
    $('#sidebar').css("width", e.pageX + 2); 
 
    $('#main').css("left", e.pageX + 2); 
 
    }) 
 
    console.log("leaving mouseDown"); 
 
}); 
 
$(document).mouseup(function(e) { 
 
    $('#clickevent').html('in another mouseUp event' + i++); 
 
    $(document).unbind('mousemove'); 
 
});
#main { 
 
    background-color: BurlyWood; 
 
    float: right; 
 
    position: absolute; 
 
    top: 100px; 
 
    bottom: 38px; 
 
    right: 0; 
 
    left: 200px; 
 
} 
 
#sidebar { 
 
    background-color: IndianRed; 
 
    width: 200px; 
 
    float: left; 
 
    position: absolute; 
 
    top: 100px; 
 
    bottom: 38px; 
 
    overflow-y: hidden; 
 
} 
 
#footer { 
 
    background-color: PaleGoldenRod; 
 
    width: 100%; 
 
    height: 38px; 
 
    bottom: 0; 
 
    position: absolute; 
 
} 
 
#header { 
 
    background-color: wheat; 
 
    width: 100%; 
 
    height: 100px; 
 
} 
 
#dragbar { 
 
    background-color: black; 
 
    height: 100%; 
 
    float: right; 
 
    width: 3px; 
 
    cursor: col-resize; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="header"> 
 
    header 
 
    <span id="mousestatus"></span> 
 
    <span id="clickevent"></span> 
 
</div> 
 
<div id="sidebar"> 
 
    <span id="position"></span> 
 
    <div id="dragbar"></div> 
 
    sidebar 
 
</div> 
 
<div id="main"> 
 
    main 
 
</div> 
 
<div id="footer"> 
 
    footer 
 
</div>

Antwort

1

Sie haben mehrere Probleme mit dem Skript.

Die #main div überlappt die #sidebar, so dass die ganz rechte Kante der Seitenleiste nicht sichtbar ist, noch mit der Maus erreichbar. Ihr mousedown-Ereignis wird also nicht ausgelöst, da es nie einen Mausklick erhält.

zwei Dinge zu tun:

z-index: 1 hinzufügen für #main und z-index: 2 für #sidebar.

, auch Ihre Ziehgriff div, um richtig zu passen, ändern Sie es CSS dies ist:

#dragbar { 
    background-color: black; 
    height: 100%; 
    width: 3px; 
    cursor: col-resize; 
    position: absolute; 
    right: 0; 
    top: 0; 
} 

das Snippet Siehe unten für eine Arbeitsversion:

var i = 0; 
 
$('#dragbar').mousedown(function(e) { 
 

 
    e.preventDefault(); 
 
    $('#mousestatus').html("mousedown" + i++); 
 
    $(document).mousemove(function(e) { 
 
    $('#position').html(e.pageX + ', ' + e.pageY); 
 
    $('#sidebar').css("width", e.pageX + 2); 
 
    $('#main').css("left", e.pageX + 2); 
 
    }) 
 
    console.log("leaving mouseDown"); 
 
}); 
 
$(document).mouseup(function(e) { 
 
    $('#clickevent').html('in another mouseUp event' + i++); 
 
    $(document).unbind('mousemove'); 
 
});
#main { 
 
    background-color: BurlyWood; 
 
    float: right; 
 
    position: absolute; 
 
    top: 100px; 
 
    bottom: 38px; 
 
    right: 0; 
 
    left: 200px; 
 
    z-index: 1; 
 
} 
 
#sidebar { 
 
    background-color: IndianRed; 
 
    width: 200px; 
 
    float: left; 
 
    position: absolute; 
 
    top: 100px; 
 
    bottom: 38px; 
 
    overflow-y: hidden; 
 
    z-index: 2; 
 
} 
 
#footer { 
 
    background-color: PaleGoldenRod; 
 
    width: 100%; 
 
    height: 38px; 
 
    bottom: 0; 
 
    position: absolute; 
 
} 
 
#header { 
 
    background-color: wheat; 
 
    width: 100%; 
 
    height: 100px; 
 
} 
 
#dragbar { 
 
    background-color: black; 
 
    height: 100%; 
 
    width: 3px; 
 
    cursor: col-resize; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="header"> 
 
    header 
 
    <span id="mousestatus"></span> 
 
    <span id="clickevent"></span> 
 
</div> 
 
<div id="sidebar"> 
 
    <span id="position"></span> 
 
    <div id="dragbar"></div> 
 
    sidebar 
 
</div> 
 
<div id="main"> 
 
    main 
 
</div> 
 
<div id="footer"> 
 
    footer 
 
</div>

+0

Sir, ich habe alle Ihren Code kopiert und eingefügt, aber es funktioniert nicht .. –

+0

Sir irgendeine andere Lösung bitte? –

+0

Was funktioniert nicht? – beerwin