jQuery UI का उपयोग किये बिना jQuery का उपयोग कर divs के साथ फ्रेम-आकार बदलने का व्यवहार अनुकरण?

Question

मैं किसी क्लाइंट के लिए फ़्रेमसेट से divs तक एक साइट को परिवर्तित कर रहा हूं। एक विशेषता है कि क्लाइंट में एक साइडबार है जिसका आकार बदल सकता है इस पर निर्भर करता है कि उपयोगकर्ता को कितनी जगह चाहिए। फ़्रेम का उपयोग करके इस साइडबार का आकार बदलना बनाया गया था। हालांकि, मुझे jQuery में इस क्षमता को अनुकरण करने में कुछ कठिनाई हो रही है।

मैं ऐसा करने के लिए jQuery UI का उपयोग नहीं करना चाहता, मुझे यूआई सूट प्रदान करने वाली सभी अतिरिक्त कार्यक्षमताओं की आवश्यकता नहीं है, और इसकी देखभाल करने के लिए कोड की कुछ पंक्तियां लिखना चाहेंगे।

मुझे केवल क्षैतिज विमान में आकार बदलने की आवश्यकता है, लंबवत आयाम तय किए गए हैं।

वर्तमान में मेरे पास एक समाधान है (प्रकार) काम करता है। साइडबार div का आकार बदला जा सकता है, लेकिन केवल तभी जब कोई उपयोगकर्ता आकार बदलने योग्य div पर क्लिक करता है, तो माउस को ड्रैग करता है, फिर फिर से div पर क्लिक करता है (mousemove ईवेंट को हटाने के लिए)।

अनुभव जो मैं चाहता हूं वह यह है: एक उपयोगकर्ता आकार बदलने योग्य div पर हो जाता है, माउस बटन को दबाता है, फिर div को बड़ा/छोटा होने के लिए ड्रैग करता है, और बटन को रिलीज़ करता है।

मेरी समस्या यह है कि: यदि कोई उपयोगकर्ता मेरे आकार बदलने योग्य div पर क्लिक करता है, तो इसे छोटे/बड़े बनाने के लिए खींचने का प्रयास करता है, माउस "नहीं" आइकन बन जाता है, और वहां एक पारदर्शी संस्करण होता है मेरा div जो माउस के साथ दवा है।

शायद यह मेरे कोड को देखकर बेहतर समझाया गया है:।

$(document).ready(function() { 
var i = 0; 
    $('#dragbar').mousedown(function(){ 
     $('#mousestatus').html("mousedown" + i++); 
     $(document).mousemove(function(e){ 
      $('#position').html(e.pageX +', '+ e.pageY); 
      $('#sidebar').css("width",e.pageX+2); 
     }) 
     console.log("leaving mouseDown"); 
    }); 
    $(document).mouseup(function(){ 
     $('#clickevent').html('in another mouseUp event' + i++); 
     $(document).unbind('mousemove'); 
     }); 
}); 

और एचटीएमएल:

<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> 

यहाँ मूल लेआउट काम कर के साथ एक अस्थायी वेब पेज है:

http://pastehtml.com/view/1crj2lj.html

समस्या देखा जा सकता है अगर आप बात लेबल आकार बदलने के लिए कोशिश ब्राउन बार का उपयोग करके "साइडबार"।

Answer 1

देखो मैं #main क्षेत्र बदल left:200px (और कोई चौड़ाई) किया जाना है।
संदेश के चयन से बचने के लिए mousedown पर e.preventDefault() जोड़ा गया।
कोड में मैं रूप में अच्छी तरह ताकि दोनों पक्षों के लिए कदम #main की left संपत्ति को बदलने ..

---

नहीं

यकीन है कि क्या आप इस समस्या वास्तव में है, लेकिन क्या देखते है कि #sidebar आकार दिया गया था, लेकिन नीचे जा रहा था है #main और इतने #dragbar गायब हो गया ..

Answer 2

event.preventDefault का उपयोग करें।

$('#dragbar').mousedown(function(e){ 
    e.preventDefault(); 
    // ... 
}); 

शायद आपको इसे mousemove में भी कॉल करने की आवश्यकता है। http://www.jsfiddle.net/gaby/Bek9L/

पर