Saf JavaScript kullanılarak tıklandığında, jQuery kitaplığı veya başka bir kitaplıkla değil, veya <p>
gibi bir HTML öğesinin nasıl yeniden boyutlandırılabileceğini merak ettim.Nasıl HTML öğesi saf javascript kullanarak yeniden boyutlandırılabilir?
cevap
Gerçekten kütüphaneye çeşit kullanmanızı tavsiye, ancak bunun için sorulan, bunu elde:
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);
}
bu sadece Firefox'ta test (tüm tarayıcılarda çalışmayabilir unutmayın, kesinlikle IE < 9) 'da çalışmıyor.
Şaşırtıcı, yardımınızı takdir ediyorum @ Pumbaa80 – monk
tek soru, ne '10' bu değeri kodunda (belg.defaultView.getComputedStyle (p) .width, 10) yapar; – monk
Bu, ondalık sayıları işlediğinden emin olan ['parseInt()'] (https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/parseInt) için bir argümandır. – user123444555621
Saf bir css3 çözümü hakkında ne düşünüyorsunuz?
div {
resize: both;
overflow: auto;
}
Ne yazık ki, CSS yeniden boyutlandırma IE – pyanzin
'da desteklenmiyor Bu hoş, ancak esnek değil. –
Sanırım şunu söylemeliyim: css 'resize' kullanma Webkit tarayıcıları, bir öğeyi daha küçük yapmak için yeniden boyutlandırmanıza izin vermez, yalnızca daha büyük (her iki boyutta). – Rotareti
resizer benim çapraz tarayıcı uyumlu bakın.
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>resizer</title>
<meta name="author" content="Andrej Hristoliubov [email protected]">
<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>
Ayrıca resizer
benim örneğini görmek basit mi:
Örnek: Ben sadece bir CodePen oluşturulan 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);
}
Harika çözüm! Firefox56, Chrome61, Opera48 ve IE11 için test edildi ve çalışıyor. – JCO9
nasıl bu can gösterirES6'yı kullanarak kolayca yapılabilir.
http://codepen.io/travist/pen/GWRBQV
Temelde, burada bunu yapar sınıftır.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;
});
- 1. Ebeveyn saf öğesinin alt öğesi bulma javascript
- 2. Yeniden Boyutlandırılabilir Paneller Nasıl Yapılır?
- 3. jquery UI kullanarak yeniden boyutlandırılabilir bölünmüş ekran bölümleri
- 4. Görüntüyü, oranlarını korurken saf HTML/CSS'de nasıl yeniden boyutlandırılır?
- 5. Yeniden boyutlandırılabilir widget android
- 6. NodeView kullanarak yeniden boyutlandırılabilir ve sıralanabilir sütunları nasıl alabilirim?
- 7. HTML öğesi nasıl taşınır
- 8. jQuery değil saf JavaScript
- 9. Yeniden boyutlandırılabilir bir MessageDialog nasıl oluşturulur
- 10. LWJGL penceresini nasıl yeniden boyutlandırılabilir yapabilirim?
- 11. Wxpython'da yeniden boyutlandırılabilir bölücü çizgi?
- 12. div metin alanı gibi yeniden boyutlandırılabilir
- 13. Saf html formunu denetleyiciye nasıl bağlarım? C#
- 14. Html tablo sütunları nasıl yeniden boyutlandırılır?
- 15. Qt'de HTML öğesi nasıl oluşturulur?
- 16. Sabit üst koordinatlı yeniden boyutlandırılabilir pencere oluştur
- 17. Javascript/jQuery öğesi seç öğesi
- 18. javascript: HTML img öğesi desteğinde SVG nasıl tespit edilir?
- 19. Nasıl saf ruby kullanarak işaretleme PDF oluşturmak
- 20. Ekran boyunca kaydırılabilen, yeniden boyutlandırılabilir UILabel
- 21. Bir HTML öğesi nasıl dışlanır
- 22. CSS'de yeniden boyutlandırılabilir bir görüntüyü ortalamak
- 23. Dinamik olarak boyutlandırılamayan yeniden boyutlandırılabilir dizi
- 24. Kalıcı Bir Birim yeniden boyutlandırılabilir mi?
- 25. UITableViewDelegate kullanmadan UITableViewCell yeniden boyutlandırılabilir mi?
- 26. Şöyle kendi HTML öğesi oluşturmak çalışıyorum dikey kaydırma HTML öğesi
- 27. Java JFrame'leri nasıl büyütülür, ancak yeniden boyutlandırılabilir değil
- 28. JavaFX düğümleri - Son kullanıcı tarafından nasıl yeniden boyutlandırılabilir?
- 29. javascript oyunu için saf js ile geliyor?
- 30. Saf javascript kullanarak stili ayarlamanın en etkili yolu?
Eminim birisi aşağıda bir cevap verecektir, ancak jQuery'de basittir ve aynı zamanda tarayıcılar arası sorunlarda da yardımcı olur. Büyük bir sorun olmadığı sürece jQuery'yi kullanmanızı öneririm. – Undefined
Ne 'yeniden hesaplanabilir' demek istiyorsun? Pencereyi yeniden boyutlandırılabilir istiyorsanız, öğenin genişliğini% olarak ayarlayabilirsiniz. –
Bir div öğesinin nasıl yeniden boyutlandırılacağı şöyledir: https://stackoverflow.com/questions/43411103/resize-div-vertical-or-horizontal/46552497#46552497 – sfanjoy