शुद्ध जावास्क्रिप्ट का उपयोग करके HTML तत्व को कैसे बदलने योग्य बनाया जा सकता है?


83

मैं सोच रहा था कि शुद्ध जावास्क्रिप्ट का उपयोग करके क्लिक किए गए HTML तत्व जैसे हम <div>या <p>टैग तत्व कैसे बना सकते हैं , न कि jQuery लाइब्रेरी या कोई अन्य लाइब्रेरी।


आपका क्या मतलब है 'रेसिजेबल'? यदि आप विंडो को बदलने योग्य चाहते हैं, तो आप तत्व की चौड़ाई% में सेट कर सकते हैं।
सागर पाटील

यहां बताया गया है कि मैं एक
दिव्य

अत्यधिक संबंधित: stackoverflow.com/questions/12194469/…
एंड्रयू

जवाबों:


111

मैं वास्तव में कुछ प्रकार के पुस्तकालय का उपयोग करने की सलाह देता हूं, लेकिन आपने इसके लिए कहा था, आपको यह प्राप्त होता है:

var p = document.querySelector('p'); // element to make resizable

p.addEventListener('click', function init() {
    p.removeEventListener('click', init, false);
    p.className = p.className + ' resizable';
    var resizer = document.createElement('div');
    resizer.className = 'resizer';
    p.appendChild(resizer);
    resizer.addEventListener('mousedown', initDrag, false);
}, false);

var startX, startY, startWidth, startHeight;

function initDrag(e) {
   startX = e.clientX;
   startY = e.clientY;
   startWidth = parseInt(document.defaultView.getComputedStyle(p).width, 10);
   startHeight = parseInt(document.defaultView.getComputedStyle(p).height, 10);
   document.documentElement.addEventListener('mousemove', doDrag, false);
   document.documentElement.addEventListener('mouseup', stopDrag, false);
}

function doDrag(e) {
   p.style.width = (startWidth + e.clientX - startX) + 'px';
   p.style.height = (startHeight + e.clientY - startY) + 'px';
}

function stopDrag(e) {
    document.documentElement.removeEventListener('mousemove', doDrag, false);
    document.documentElement.removeEventListener('mouseup', stopDrag, false);
}

डेमो

याद रखें कि यह सभी ब्राउज़रों में नहीं चल सकता है (केवल फ़ायरफ़ॉक्स में परीक्षण किया गया है, निश्चित रूप से IE <9 में काम नहीं कर रहा है)।


एक सवाल, '10' का यह मान कोड parseInt (document.defaultView.getComputedStyle (p) .width, 10) में क्या करता है;
भिक्षु

1
मुझे स्क्रिप्ट में एक बग मिला, यदि आप एक से अधिक p टैग तत्व होने पर कई p टैग तत्व को फिर से आकार देने का प्रयास करते हैं तो कोड काम नहीं करता है, क्या इसका कोई समाधान है?
भिक्षु

1
आप वास्तव में उत्पादन में इसका उपयोग करने वाले नहीं हैं, क्या आप हैं? उपरोक्त कोड स्पष्ट रूप से एक त्वरित हैक है, और इसमें कई अन्य मुद्दे हैं। यह सिर्फ दिखाना है कि चीजें निम्न स्तर पर कैसे काम करती हैं।
14:123 पर user123444555621

4
+1, मुझे पता है कि यह निम्न स्तर का है, लेकिन यह बहुत उपयोगी है जब आप किसी भी कारण से तीसरे पक्ष के पुस्तकालय का उपयोग नहीं कर सकते। मैंने इसे क्रोम, फ़ायरफ़ॉक्स, ओपेरा और सफारी पर परीक्षण किया है।
जनवोरक

4
मैंने jsfiddle को ठीक किया। यह काम करना चाहिए और समान प्रभाव प्राप्त करना चाहिए। jsfiddle.net/MissoulaLorenzo/gfn6ob3j
लोरेंजो गंगी

79

एक शुद्ध css3 समाधान के बारे में क्या?

div {
    resize: both;
    overflow: auto;
} 

एमडीएन वेब डॉक्स

W3Schools उदाहरण

ब्राउज़र का समर्थन


3
दुर्भाग्य से, CSS रीसाइज़िंग IE में समर्थित नहीं है
pyanzin

9
मुझे लगता है कि यह उल्लेख करना महत्वपूर्ण है: सीएसएस resizeवेबकिट ब्राउज़रों का उपयोग करने से आप इसे छोटे, केवल बड़े (दोनों आयामों में) बनाने के लिए एक तत्व का आकार बदलने नहीं देंगे।
रोटारिटी

5
मैंने इसे क्रोम 53 में आज़माया और यह सिकुड़ने और फैलने दोनों के लिए काम करता है।
डचकेव

1
यह जानना वास्तव में अच्छा है। लेकिन मुझे फिर से आकार देने वाले पाद की आवश्यकता है जो शीर्ष की ओर आकार लेता है। "आकार" के साथ संभव नहीं लगता है।
मार्टिन मीसर

शुक्रिया यह मुझे बचा लिया! मुझे एक इफ्रेम को बदलने योग्य बनाने की आवश्यकता थी और यह काम करता है। जावास्क्रिप्ट के लिए जावास्क्रिप्ट में कुछ भी काम नहीं करता है।
FourCinnamon0

25

आसान है:

उदाहरण: https://jsfiddle.net/RainStudios/mw786v1w/

var element = document.getElementById('element');
//create box in bottom-left
var resizer = document.createElement('div');
resizer.style.width = '10px';
resizer.style.height = '10px';
resizer.style.background = 'red';
resizer.style.position = 'absolute';
resizer.style.right = 0;
resizer.style.bottom = 0;
resizer.style.cursor = 'se-resize';
//Append Child to Element
element.appendChild(resizer);
//box function onmousemove
resizer.addEventListener('mousedown', initResize, false);

//Window funtion mousemove & mouseup
function initResize(e) {
   window.addEventListener('mousemove', Resize, false);
   window.addEventListener('mouseup', stopResize, false);
}
//resize the element
function Resize(e) {
   element.style.width = (e.clientX - element.offsetLeft) + 'px';
   element.style.height = (e.clientY - element.offsetTop) + 'px';
}
//on mouseup remove windows functions mousemove & mouseup
function stopResize(e) {
    window.removeEventListener('mousemove', Resize, false);
    window.removeEventListener('mouseup', stopResize, false);
}

2
महान समाधान! परीक्षण किया और Firefox56, Chrome61, Opera48 और IE11 के लिए काम करता है।
JCO9

यह महान काम करता है! मैं इस मुद्दे से निपटने के लिए एक शुरुआती बिंदु की तलाश में हूं और इसने मुझे कुछ काम करने के लिए दिया है।

15

मेरा क्रॉस ब्राउज़र संगत पुनर्विक्रेता देखें ।

    <!doctype html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>resizer</title>
        <meta name="author" content="Andrej Hristoliubov anhr@mail.ru">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="https://rawgit.com/anhr/resizer/master/Common.js"></script>
        <script type="text/javascript" src="https://rawgit.com/anhr/resizer/master/resizer.js"></script>
        <style>
            .element {
                border: 1px solid #999999;
                border-radius: 4px;
                margin: 5px;
                padding: 5px;
            }
        </style>
        <script type="text/javascript">
            function onresize() {
                var element1 = document.getElementById("element1");
                var element2 = document.getElementById("element2");
                var element3 = document.getElementById("element3");
                var ResizerY = document.getElementById("resizerY");
                ResizerY.style.top = element3.offsetTop - 15 + "px";
                var topElements = document.getElementById("topElements");
                topElements.style.height = ResizerY.offsetTop - 20 + "px";
                var height = topElements.clientHeight - 32;
                if (height < 0)
                    height = 0;
                height += 'px';
                element1.style.height = height;
                element2.style.height = height;
            }
            function resizeX(x) {
                //consoleLog("mousemove(X = " + e.pageX + ")");
                var element2 = document.getElementById("element2");
                element2.style.width =
                    element2.parentElement.clientWidth
                    + document.getElementById('rezizeArea').offsetLeft
                    - x
                    + 'px';
            }
            function resizeY(y) {
                //consoleLog("mousemove(Y = " + e.pageY + ")");
                var element3 = document.getElementById("element3");
                var height =
                    element3.parentElement.clientHeight
                    + document.getElementById('rezizeArea').offsetTop
                    - y
                ;
                //consoleLog("mousemove(Y = " + e.pageY + ") height = " + height + " element3.parentElement.clientHeight = " + element3.parentElement.clientHeight);
                if ((height + 100) > element3.parentElement.clientHeight)
                    return;//Limit of the height of the elemtnt 3
                element3.style.height = height + 'px';
                onresize();
            }
            var emailSubject = "Resizer example error";
        </script>
    </head>
    <body>
        <div id='Message'></div>
        <h1>Resizer</h1>
        <p>Please see example of resizing of the HTML element by mouse dragging.</p>
        <ul>
            <li>Drag the red rectangle if you want to change the width of the Element 1 and Element 2</li>
            <li>Drag the green rectangle if you want to change the height of the Element 1 Element 2 and Element 3</li>
            <li>Drag the small blue square at the left bottom of the Element 2, if you want to resize of the Element 1 Element 2 and Element 3</li>
        </ul>
        <div id="rezizeArea" style="width:1000px; height:250px; overflow:auto; position: relative;" class="element">
            <div id="topElements" class="element" style="overflow:auto; position:absolute; left: 0; top: 0; right:0;">
                <div id="element2" class="element" style="width: 30%; height:10px; float: right; position: relative;">
                    Element 2
                    <div id="resizerXY" style="width: 10px; height: 10px; background: blue; position:absolute; left: 0; bottom: 0;"></div>
                    <script type="text/javascript">
                        resizerXY("resizerXY", function (e) {
                                resizeX(e.pageX + 10);
                                resizeY(e.pageY + 50);
                            });
                    </script>
                </div>
                <div id="resizerX" style="width: 10px; height:100%; background: red; float: right;"></div>
                <script type="text/javascript">
                    resizerX("resizerX", function (e) {
                        resizeX(e.pageX + 25);
                    });
                </script>
                <div id="element1" class="element" style="height:10px; overflow:auto;">Element 1</div>
            </div>
            <div id="resizerY" style="height:10px; position:absolute; left: 0; right:0; background: green;"></div>
            <script type="text/javascript">
                resizerY("resizerY", function (e) {
                    resizeY(e.pageY + 25);
                });
            </script>
            <div id="element3" class="element" style="height:100px; position:absolute; left: 0; bottom: 0; right:0;">Element 3</div>
        </div>
        <script type="text/javascript">
            onresize();
        </script>
    </body>
    </html>

इसके अलावा मेरे resizer का उदाहरण देखें


यह उल्लेखनीय है कि जब मैं फ़ायरफ़ॉक्स (लिनक्स पर) में आपके उदाहरण की कोशिश करता हूं, तो क्षैतिज और ऊर्ध्वाधर आकार पाठ को चयनित और अचयनित के बीच आगे-पीछे पलक झपकाने का कारण बनता है।
एंड्रयू

3

मैंने अभी एक CodePen बनाया है, जो दिखाता है कि ES6 का उपयोग करके इसे बहुत आसानी से कैसे किया जा सकता है।

http://codepen.io/travist/pen/GWRBQV

मूल रूप से, यहां वह वर्ग है जो ऐसा करता है।

let getPropertyValue = function(style, prop) {
  let value = style.getPropertyValue(prop);
  value = value ? value.replace(/[^0-9.]/g, '') : '0';
  return parseFloat(value);
}

let getElementRect = function(element) {
  let style = window.getComputedStyle(element, null);
  return {
    x: getPropertyValue(style, 'left'),
    y: getPropertyValue(style, 'top'),
    width: getPropertyValue(style, 'width'),
    height: getPropertyValue(style, 'height')
  }
}

class Resizer {
    constructor(wrapper, element, options) {
        this.wrapper = wrapper;
        this.element = element;
        this.options = options;
        this.offsetX = 0;
        this.offsetY = 0;
        this.handle = document.createElement('div');
        this.handle.setAttribute('class', 'drag-resize-handlers');
        this.handle.setAttribute('data-direction', 'br');
        this.wrapper.appendChild(this.handle);
        this.wrapper.style.top = this.element.style.top;
        this.wrapper.style.left = this.element.style.left;
        this.wrapper.style.width = this.element.style.width;
        this.wrapper.style.height = this.element.style.height;
        this.element.style.position = 'relative';
        this.element.style.top = 0;
        this.element.style.left = 0;
        this.onResize = this.resizeHandler.bind(this);
        this.onStop = this.stopResize.bind(this);
        this.handle.addEventListener('mousedown', this.initResize.bind(this));
    }

    initResize(event) {
        this.stopResize(event, true);
        this.handle.addEventListener('mousemove', this.onResize);
        this.handle.addEventListener('mouseup', this.onStop);
    }

    resizeHandler(event) {
        this.offsetX = event.clientX - (this.wrapper.offsetLeft + this.handle.offsetLeft);
        this.offsetY = event.clientY - (this.wrapper.offsetTop + this.handle.offsetTop);
        let wrapperRect = getElementRect(this.wrapper);
        let elementRect = getElementRect(this.element);
        this.wrapper.style.width = (wrapperRect.width + this.offsetX) + 'px';
        this.wrapper.style.height = (wrapperRect.height + this.offsetY) + 'px';
        this.element.style.width = (elementRect.width + this.offsetX) + 'px';
        this.element.style.height = (elementRect.height + this.offsetY) + 'px';
    }

    stopResize(event, nocb) {
        this.handle.removeEventListener('mousemove', this.onResize); 
        this.handle.removeEventListener('mouseup', this.onStop);
    }
}

class Dragger {
    constructor(wrapper, element, options) {
        this.wrapper = wrapper;
        this.options = options;
        this.element = element;
        this.element.draggable = true;
        this.element.setAttribute('draggable', true);
        this.element.addEventListener('dragstart', this.dragStart.bind(this));
    }

    dragStart(event) {
        let wrapperRect = getElementRect(this.wrapper);
        var x = wrapperRect.x - parseFloat(event.clientX);
        var y = wrapperRect.y - parseFloat(event.clientY);
        event.dataTransfer.setData("text/plain", this.element.id + ',' + x + ',' + y);
    }

    dragStop(event, prevX, prevY) {
        var posX = parseFloat(event.clientX) + prevX;
        var posY = parseFloat(event.clientY) + prevY;
        this.wrapper.style.left = posX + 'px';
        this.wrapper.style.top = posY + 'px';
    }
}

class DragResize {
    constructor(element, options) {
        options = options || {};
        this.wrapper = document.createElement('div');
        this.wrapper.setAttribute('class', 'tooltip drag-resize');
        if (element.parentNode) {
          element.parentNode.insertBefore(this.wrapper, element);
        }
        this.wrapper.appendChild(element);
        element.resizer = new Resizer(this.wrapper, element, options);
        element.dragger = new Dragger(this.wrapper, element, options);
    }
}

document.body.addEventListener('dragover', function (event) {
    event.preventDefault();
    return false;
});

document.body.addEventListener('drop', function (event) {
    event.preventDefault();
    var dropData = event.dataTransfer.getData("text/plain").split(',');
    var element = document.getElementById(dropData[0]);
    element.dragger.dragStop(event, parseFloat(dropData[1]), parseFloat(dropData[2]));
    return false;
});

"बहुत आसानी से": योग्य - इसके अलावा, यह मेरे लिए टूट रहा है; ऐसा लगता है कि यह चयन और पाठ के विचलन से परेशान है।
एंड्रयू

2

मैंने एक फ़ंक्शन बनाया है जो एक html एलिमेंट की एक आईडी प्राप्त करता है और यह एक बॉर्डर जोड़ता है जिसके दाईं ओर फ़ंक्शन सामान्य है और सिर्फ एक आईडी को पुन: बनाता है ताकि आप इसे वैसे ही कॉपी कर सकें और यह काम करेगा

var myoffset;
function resizeE(elem){
    var borderDiv = document.createElement("div");
    borderDiv.className = "border";
    borderDiv.addEventListener("mousedown",myresize = function myrsize(e) {
	    myoffset = e.clientX - (document.getElementById(elem).offsetLeft + parseInt(window.getComputedStyle(document.getElementById(elem)).getPropertyValue("width")));
	    window.addEventListener("mouseup",mouseUp);
	    document.addEventListener("mousemove",mouseMove = function mousMove(e) {
	   	 document.getElementById(elem).style.width = `${e.clientX -  myoffset - document.getElementById(elem).offsetLeft}px`;
		});
	});
    document.getElementById(elem).appendChild(borderDiv);
}

function mouseUp() {
    document.removeEventListener("mousemove", mouseMove);
    window.removeEventListener("mouseup",mouseUp);
}

function load() 
{
	resizeE("resizeableDiv");
	resizeE("anotherresizeableDiv");
  resizeE("anotherresizeableDiv1");
}
.border {

  position: absolute;
  cursor: e-resize;
  width: 9px;
  right: -5px;
  top: 0;
  height: 100%;
}

#resizeableDiv {
  width: 30vw;
  height: 30vh;
  background-color: #84f4c6;
  position: relative;
}
#anotherresizeableDiv {
  width: 30vw;
  height: 30vh;
  background-color: #9394f4;
  position: relative;
}
#anotherresizeableDiv1 {
  width: 30vw;
  height: 30vh;
  background-color: #43f4f4;
  position: relative;
}
#anotherresizeableDiv1 .border{
  background-color: black;
}
#anotherresizeableDiv .border{
  width: 30px;
  right: -200px;
  background-color: green;
}
<body onload="load()">

  <div id="resizeableDiv">change my size with the east border</div>
  <div id="anotherresizeableDiv1">with visible border</div>
</body>
  <div id="anotherresizeableDiv">with editted outside border</div>
</body>

resizeE("resizeableDiv"); //this calls a function that does the magic to the id inserted

2

बस mousemoveवेनिला js में घटना का उपयोग कर

कदम

  1. mousemoveअपने लक्ष्य में जोड़ें

  2. लक्ष्य moveघटना सुनें

  3. सूचक स्थान प्राप्त करें, अपने लक्ष्य का आकार बदलें

कोड्स

    const div = document.querySelector(`div.before`);
    const box = document.querySelector(`div.container`);
    box.addEventListener(`mousemove`, (e) => {
      const {
        offsetX,
        offsetY,
      } = e;
      div.style.width = offsetX + `px`;
    });

लाइव डेमो

https://codepen.io/xgqfrms/full/wvMQqZL यहाँ छवि विवरण दर्ज करें

रेफरी

https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event

https://medium.com/the-z/making-a-resizable-div-in-js-is-not-easy-as-you-think-bda19a1bc53d


1

इसके साथ प्रयास करने के लिए यहां बहुत अच्छे उदाहरण हैं, लेकिन ये सभी इसे खींचने के लिए एक संदर्भ तत्व के रूप में "div" जैसे कुछ अतिरिक्त या बाहरी तत्व को जोड़ने पर आधारित हैं, और मूल तत्व के नए आयाम या स्थिति की गणना करते हैं।

यहाँ एक उदाहरण है जो किसी भी अतिरिक्त तत्वों का उपयोग नहीं करता है। हम इसके संचालन को प्रभावित किए बिना सीमा, पैडिंग या मार्जिन जोड़ सकते हैं। इस उदाहरण में हमने रंगों को नहीं जोड़ा है, न ही सीमाओं के लिए कोई दृश्य संदर्भ और न ही निचले दाएं कोने में एक सुराग के रूप में जहां आप आयामों को बड़ा या छोटा कर सकते हैं, लेकिन रिसैबल तत्वों के चारों ओर कर्सर का उपयोग करके सुराग दिखाई देते हैं!

let resizerForCenter = new Resizer('center')  
resizerForCenter.initResizer()

इसे कार्रवाई में देखेंCodeSandbox के साथ :

इस उदाहरण में हम ES6 का उपयोग करते हैं, और एक मॉड्यूल जो एक वर्ग को निर्यात करता है जिसे Resizer कहा जाता है। एक उदाहरण एक हजार शब्दों के लायक है:

उबाऊ-बर्फ-qz1sd संपादित करें

या कोड स्निपेट के साथ:


-2

var resizeHandle = document.getElementById('resizable');
var box = document.getElementById('resize');
resizeHandle.addEventListener('mousedown', initialiseResize, false);

function initialiseResize(e) {
  window.addEventListener('mousemove', startResizing, false);
  window.addEventListener('mouseup', stopResizing, false);
}

function stopResizing(e) {
  window.removeEventListener('mousemove', startResizing, false);
  window.removeEventListener('mouseup', stopResizing, false);
}

function startResizing(e) {
  box.style.width = (e.clientX) + 'px';
  box.style.height = (e.clientY) + 'px';
}

function startResizing(e) {
  box.style.width = (e.clientX - box.offsetLeft) + 'px';
  box.style.height = (e.clientY - box.offsetTop) + 'px';
}
#resize {
  position: relative;
  width: 130px;
  height: 130px;
  border: 2px solid blue;
  color: white;
}

#resizable {
  background-color: white;
  width: 10px;
  height: 10px;
  cursor: se-resize;
  position: absolute;
  right: 0;
  bottom: 0;
}
<div id="resize">

  <div id="resizable">
  </div>

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.