केवल वेनिला जावास्क्रिप्ट का उपयोग करना, कोई jQuery या अन्य पुस्तकालय नहीं।

Textarea तत्व के व्यवहार का अनुकरण करके, किसी तत्व की चौड़ाई और ऊंचाई निर्धारित करने के लिए एक गैजेट लिखा।

resize gadget screen shot

आप निचले दाएं कोने में ग्रे वर्ग पर क्लिक करते हैं, कर्सर "दक्षिण पूर्व" कर्सर में बदल जाता है, बाएं माउस बटन को दबाए रखते हुए, आप आकार बदल सकते हैं, और जब माउस छोड़ते हैं, तो आकार बदलना होता है; जैसे टेक्स्टरेरा के साथ। यहाँ उदाहरण कोड है; यहाँ आकार-समायोज्य सामग्री अतिप्रवाह के साथ एक div है: स्क्रॉल; लेकिन लक्ष्य यह है कि यह किसी भी चीज़ के साथ काम करता है (मैं इसे आईफ्रेम के साथ उपयोग करने की योजना बना रहा हूं।)

<!DOCTYPE html><html lang="en"><head>

<meta charset="utf-8">
<title>resize test</title>

<style>
    table.resizerTable {
        border-spacing  : 0;
        border-collapse : separate;
    }
    table.resizerTable td { padding: 0; }
    table.resizerTable div.resizer {
        width  : 20px;
        height : 20px;
        cursor : se-resize;
        background-color: #bbb;
    }
    table.resizerTable div.resizer:active {
        background-color: red;
    }
    div#resizee {
        overflow: scroll
    }
</style>

<script type="text/javascript">
var resizee = {
    getWidth: function(){
        return parseFloat(document.getElementById("resizee").style.width);
    },
    getHeight: function(){
        return parseFloat(document.getElementById("resizee").style.height);
    },
    setWidth: function(w){
        document.getElementById("resizee").style.width = w + 'px';
    },
    setHeight: function(h){
        document.getElementById("resizee").style.height = h + 'px';
    },
};
var resizer = {
    start : null,
    mousedown: function(elt, evt){
        var mainButtonDown = !!(evt.buttons % 2);
        if (!mainButtonDown) return;
        this.start = {
            x      : evt.clientX,
            y      : evt.clientY,
            width  : resizee.getWidth(),
            height : resizee.getHeight()
        };
    }
};
function mousemove(evt){
    var mainButtonDown = !!(evt.buttons % 2);
    if (mainButtonDown){
        var start = resizer.start;
        if (start){
            var x      = evt.clientX,
                y      = evt.clientY,
                dx     = x - start.x,
                dy     = y - start.y,
                width  = start.width  + dx,
                height = start.height + dy;
            resizee.setWidth(width);
            resizee.setHeight(height);
        } else {
        }
    } else {
        resizer.start = null;
    }
    //var compSty = getComputedStyle(evt.target);
}
function mouseup(){
    resizer.start = null;
}
function bodyOnload(){
    document.addEventListener('mousemove', mousemove);
    document.addEventListener('mouseup', mouseup);
    resizee.setWidth(300);
    resizee.setHeight(150);
}
</script>

</head><body onload="bodyOnload();">

<table class="resizerTable">
    <tr>
        <td>
            <div id="resizee">
                <fieldset>
                    <legend>legend title</legend>
                    <fieldset>
                        <legend>inner legend title</legend>
                        lorem ipsum dolor sit amet consectetur adipiscing elit
                    </fieldset>
                    <ul><li>foo</li><li>bar</li><li>blah blah</li><li>kvatsh</li><li>one</li><li>zwei</li><li>cinque</li></ul>
                </fieldset>
            </div>
        </td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td>
            <div onmousedown="resizer.mousedown(this, event)" id="resizer" class="resizer"></div>
        </td>
    </tr>
</table>

<div></div>

</body></html>

यह फ़ायरफ़ॉक्स और आईई में ठीक काम करता है, लेकिन यह केवल क्रोम में रुक-रुक कर काम करता है। (सफारी में परीक्षण नहीं किया है)।

यहाँ क्रोम में क्या होता है: हैंडल पर माउस-डाउन करें और इसे हिंसक रूप से हिलाएँ। ऐसा 5 बार या तो करें। किसी बिंदु पर, यह काम करना बंद कर देगा, और कर्सर कुछ इस तरह बदल जाएगा

nodrop

यदि आप बिना हिलाए फिर से हैंडल पर क्लिक करते हैं, तो यह काम पर वापस चला जाएगा, लेकिन यदि आप बहुत हिंसक रूप से हिलाते हैं तो फिर से काम करना बंद कर दें। मुझे यह व्यवहार एफएफ या आईई पर नहीं मिला, चाहे मैंने कितनी भी कोशिश की हो।

यह क्या है? क्या मेरे कोड में कोई बग है? यदि यह क्रोम ब्राउज़र के साथ कुछ है, तो यह क्या है, और क्या इसके आसपास काम किया जा सकता है?

अपडेट करें कोड को कॉपी और पेस्ट करने वालों के लिए: आपको नकारात्मक चौड़ाई/ऊंचाई के लिए नियंत्रण करने की आवश्यकता है।

1
mathheadinclouds 30 अक्टूबर 2019, 10:00

1 उत्तर

सबसे बढ़िया उत्तर

जब आप आकार बदलने का प्रयास कर रहे हैं, तो आप .resizer का चयन कर रहे होंगे, आप user-select: none शैली को .resizer पर सेट कर सकते हैं ताकि इसे चुने जाने से बचा जा सके:

table.resizerTable {
    border-spacing  : 0;
    border-collapse : separate;
    user-select: none;
}
<!DOCTYPE html><html lang="en"><head>

<meta charset="utf-8">
<title>resize test</title>

<style>
    table.resizerTable {
        border-spacing  : 0;
        border-collapse : separate;
        user-select: none;
    }
    table.resizerTable td { padding: 0; }
    table.resizerTable div.resizer {
        width  : 20px;
        height : 20px;
        cursor : se-resize;
        background-color: #bbb;
    }
    table.resizerTable div.resizer:active {
        background-color: red;
    }
    div#resizee {
        overflow: scroll;
    }
</style>

<script type="text/javascript">
var resizee = {
    getWidth: function(){
        return parseFloat(document.getElementById("resizee").style.width);
    },
    getHeight: function(){
        return parseFloat(document.getElementById("resizee").style.height);
    },
    setWidth: function(w){
        document.getElementById("resizee").style.width = w + 'px';
    },
    setHeight: function(h){
        document.getElementById("resizee").style.height = h + 'px';
    },
};
var resizer = {
    start : null,
    mousedown: function(elt, evt){
        var mainButtonDown = !!(evt.buttons % 2);
        if (!mainButtonDown) return;
        this.start = {
            x      : evt.clientX,
            y      : evt.clientY,
            width  : resizee.getWidth(),
            height : resizee.getHeight()
        };
    }
};
function mousemove(evt){
    var mainButtonDown = !!(evt.buttons % 2);
    if (mainButtonDown){
        var start = resizer.start;
        if (start){
            var x      = evt.clientX,
                y      = evt.clientY,
                dx     = x - start.x,
                dy     = y - start.y,
                width  = start.width  + dx,
                height = start.height + dy;
            resizee.setWidth(width);
            resizee.setHeight(height);
        } else {
        }
    } else {
        resizer.start = null;
    }
    //var compSty = getComputedStyle(evt.target);
}
function mouseup(){
    resizer.start = null;
}
function bodyOnload(){
    document.addEventListener('mousemove', mousemove);
    document.addEventListener('mouseup', mouseup);
    resizee.setWidth(300);
    resizee.setHeight(150);
}
</script>

</head><body onload="bodyOnload();">

<table class="resizerTable">
    <tr>
        <td>
            <div id="resizee">
                <fieldset>
                    <legend>legend title</legend>
                    <fieldset>
                        <legend>inner legend title</legend>
                        lorem ipsum dolor sit amet consectetur adipiscing elit
                    </fieldset>
                    <ul><li>foo</li><li>bar</li><li>blah blah</li><li>kvatsh</li><li>one</li><li>zwei</li><li>cinque</li></ul>
                </fieldset>
            </div>
        </td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td>
            <div onmousedown="resizer.mousedown(this, event)" id="resizer" class="resizer"></div>
        </td>
    </tr>
</table>

<div></div>

</body></html>
1
shrys 30 अक्टूबर 2019, 07:16