Ви не увійшли. Будь ласка, увійдіть або зареєструйтесь.
Ласкаво просимо вас на україномовний форум з програмування, веб-дизайну, SEO та всього пов'язаного з інтернетом та комп'ютерами.
Будемо вдячні, якщо ви поділитись посиланням на Replace.org.ua на інших ресурсах.
Для того щоб створювати теми та надсилати повідомлення вам потрібно Зареєструватись.
Український форум програмістів → HTML та CSS → Як зробити можливість сування елементу css?
Сторінки 1
Для відправлення відповіді ви повинні увійти або зареєструватися
Як зробити сування можливість сування елементу, подібно стандартному вікну віндовс?
мова про це?
http://www.w3schools.com/html/html5_draganddrop.aspотаке? - http://www.w3schools.com/html/tryit.asp … raganddrop
Як зробити щоб можна булу пересувати це вікно:
Що означає пересувати ? Детальніше опишіть що ви хочете зробити.
Те що ви показали на скріншоті це не вікно віндовс, це скорій всього блок, але хто його зна.
Можливо ви хочете перетягувати блок за допомогою мишки ?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Draggable </title>
<style>
#draggable {
width: 150px;
height: 150px;
padding: 0.5em;
border: dashed;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
Drag me around
</div>
</body>
</html>Детальніше тут https://jqueryui.com/draggable
Що означає пересувати ? Детальніше опишіть що ви хочете зробити.
Те що ви показали на скріншоті це не вікно віндовс, це скорій всього блок, але хто його зна.Можливо ви хочете перетягувати блок за допомогою мишки ?
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Draggable </title> <style> #draggable { width: 150px; height: 150px; padding: 0.5em; border: dashed; } </style> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { $( "#draggable" ).draggable(); }); </script> </head> <body> <div id="draggable" class="ui-widget-content"> Drag me around </div> </body> </html>Детальніше тут https://jqueryui.com/draggable
Так, саме це я хотів, дякую!
Просто цікаво, може є версія на чистому JS? 
Просто цікаво, може є версія на чистому JS?
в вашому js є повідомлення про те, що хтось натиснув мишкою кудись?
Просто цікаво, може є версія на чистому JS?
Готова є, в JQ, JQ UI (це і є чистий JS). Можна ще пошукати в інтернеті.
Ви можете також зробити самі це.
Обробляєте подію мишки, дізнаєтесь її координати, і присвоюєте координати блоку
Події - http://www.w3schools.com/js/js_events_examples.asp
Координати можна присвоїти так, наприклад
document.getElementById('myDiv').style.left = cordx;
document.getElementById('myDiv').style.top = cordy;
Просто цікаво, може є версія на чистому JS?
В чистому JS звичайно можна самому зробити, а це багато гемору
- потрібно вішати обробники подій нажаття кнопки мишкою (onmousedown) по елементу
- потрібно вішати обробник подій на рух мишкою (onmousemove), і якщо в даний момент кнопка миші є натиснутою, то відповідно почати зміщевання самого блока за мишкою
- потрібно вішати ...
- потрібно вішати ...
- і так далі, всього не переназву, бо по ходу діла може ще щось випливти,
О, тільки що згадав, натомість ось всіх подій із мишею є вже спеціальні, для цього, drag&drop події. https://developer.mozilla.org/en-US/doc … d_Drop_API
можна використати їх
але, мороки із ними ну дуже багато, насправді існує дуже багато факторів, які на перший погляд виглядають дуже просто. Думаєте що переміщення вікон у віндовсі просте? Ніііі! там тоже багато різних івентів, і всі вони між собою якось взаємодіють
наведу вам приклад, щоробити коли два-три елементи є переміщувальними, який із них повинен бути на верхньому плані? який на нижньому? це все потрібно контролювати
або що робити коли елемент дійшов до краю екрану, дозволяти ховатись за екран? хз! тут вже потрібно відштовхуватись від поставленої задачі
Це я сам написав. Так-сяк робить, головна проблема що елемент миттєво, при натисканні, розташовується в центрі кліка мишки, якщо хочете доробіть.
<!DOCTYPE HTML>
<html>
<head>
<title>Non</title>
<style type="text/css">
#box {
background-color:black;
color:white;
padding:90px;
position:absolute;
display:block;
font-family:verdana;
font-size:20px;
}
</style>
<script type="text/JavaScript">
var action = 0; //1 - onmousedown, 2 - onmouseup
function moves(e)
{
document.onmousedown = function () {
action = 1;
}
document.onmouseup = function () {
action = 2;
}
if (action == 1)
{
var _coordinate;
_coordinate = 'left' + document.getElementById('box').style.left + '<br>';
_coordinate += 'top' + document.getElementById('box').style.top + '<br>';
_coordinate += document.getElementById('box').offsetWidth + '<br>';
_coordinate += document.getElementById('box').offsetHeight + '<br>';
_coordinate += 'sX' + e.screenX + '<br>';
_coordinate += 'sY' + e.screenY + '<br>';
_coordinate += 'cX' + e.clientX + '<br>';
_coordinate += 'cY' + e.clientY + '<br>';
document.getElementById('coordinate').innerHTML = _coordinate;
document.getElementById('box').style.left = e.clientX - document.getElementById('box').offsetWidth / 2;
document.getElementById('box').style.top = e.clientY - document.getElementById('box').offsetHeight / 2;
}
}
</script>
</head>
<body>
<div id="coordinate" style="color: red;"></div>
<div onmousemove="moves(event)" id="box">box</div>
</body>
</html>ost.bregin2014 написав:Просто цікаво, може є версія на чистому JS?
В чистому JS звичайно можна самому зробити, а це багато гемору
- потрібно вішати обробники подій нажаття кнопки мишкою (onmousedown) по елементу
- потрібно вішати обробник подій на рух мишкою (onmousemove), і якщо в даний момент кнопка миші є натиснутою, то відповідно почати зміщевання самого блока за мишкою
- потрібно вішати ...
- потрібно вішати ...
- і так далі, всього не переназву, бо по ходу діла може ще щось випливти,О, тільки що згадав, натомість ось всіх подій із мишею є вже спеціальні, для цього, drag&drop події. https://developer.mozilla.org/en-US/doc … d_Drop_API
можна використати їхале, мороки із ними ну дуже багато, насправді існує дуже багато факторів, які на перший погляд виглядають дуже просто. Думаєте що переміщення вікон у віндовсі просте? Ніііі! там тоже багато різних івентів, і всі вони між собою якось взаємодіють
наведу вам приклад, щоробити коли два-три елементи є переміщувальними, який із них повинен бути на верхньому плані? який на нижньому? це все потрібно контролювати
або що робити коли елемент дійшов до краю екрану, дозволяти ховатись за екран? хз! тут вже потрібно відштовхуватись від поставленої задачі
Я краще візьму готовий варіант на Jquery UI 
Це я сам написав. Так-сяк робить, головна проблема що елемент миттєво, при натисканні, розташовується в центрі кліка мишки, якщо хочете доробіть.
<!DOCTYPE HTML> <html> <head> <title>Non</title> <style type="text/css"> #box { background-color:black; color:white; padding:90px; position:absolute; display:block; font-family:verdana; font-size:20px; } </style> <script type="text/JavaScript"> var action = 0; //1 - onmousedown, 2 - onmouseup function moves(e) { document.onmousedown = function () { action = 1; } document.onmouseup = function () { action = 2; } if (action == 1) { var _coordinate; _coordinate = 'left' + document.getElementById('box').style.left + '<br>'; _coordinate += 'top' + document.getElementById('box').style.top + '<br>'; _coordinate += document.getElementById('box').offsetWidth + '<br>'; _coordinate += document.getElementById('box').offsetHeight + '<br>'; _coordinate += 'sX' + e.screenX + '<br>'; _coordinate += 'sY' + e.screenY + '<br>'; _coordinate += 'cX' + e.clientX + '<br>'; _coordinate += 'cY' + e.clientY + '<br>'; document.getElementById('coordinate').innerHTML = _coordinate; document.getElementById('box').style.left = e.clientX - document.getElementById('box').offsetWidth / 2; document.getElementById('box').style.top = e.clientY - document.getElementById('box').offsetHeight / 2; } } </script> </head> <body> <div id="coordinate" style="color: red;"></div> <div onmousemove="moves(event)" id="box">box</div> </body> </html>
я ж кажу, підводних каменів є ціла купа, ось вам і позиціонування блоку відносно самого курсора
Просто цікаво, може є версія на чистому JS?
все прекрасно розписано
http://learn.javascript.ru/drag-and-drop
http://learn.javascript.ru/drag-and-drop-objects
окремо самі приклади звідти
https://221v.github.io/other-examples/d … index.html
https://221v.github.io/other-examples/d … index.html
https://221v.github.io/other-examples/d … index.html
"ЖутьКвєря нам нінужьон!"(с)
p.s. немає там ніяких підводних каменів!
якщо програмісти які відписались вище - не змогли розібратися в деталях --
це зовсім не означає що не зможете розібратися ви! успіхів!
----
Що означає пересувати ? Детальніше опишіть що ви хочете зробити.
Те що ви показали на скріншоті це не вікно віндовс, це скорій всього блок, але хто його зна.Можливо ви хочете перетягувати блок за допомогою мишки ?
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Draggable </title> <style> #draggable { width: 150px; height: 150px; padding: 0.5em; border: dashed; } </style> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { $( "#draggable" ).draggable(); }); </script> </head> <body> <div id="draggable" class="ui-widget-content"> Drag me around </div> </body> </html>Детальніше тут https://jqueryui.com/draggable
скільки метрів то лайно щастячко важить?
скільки треба ніггерів щоб вони мегатонни того лайна завантажили і часу воно відрендерилось/почало працювати в браузері?
скільки метрів то лайно щастячко важить?
скільки треба ніггерів щоб вони мегатонни того лайна завантажили і часу воно відрендерилось/почало працювати в браузері?
Важить 0 Мбайт, якщо бути точнішим ~824 KB (або 6,44 Мбіт), завантажується практично за секунду, відображається теж миттєво, до того ж не забувайте що скорій всього ще й кешується.
Якщо всерівно цього занадто багато можна використати min jq, i вибрати конкретний потрібний елемент, тоді це важити буде 114 KB (0,89 Мбіт).
p.s. немає там ніяких підводних каменів!
Є, наприклад витягніть м'яч за межі вікна Windows, відпустіть кнопку, і м'яч "прилипне" до курсора. (а в JQ ні) І ще я думаю можна багато чого найти.
221VOLT написав:скільки метрів то лайно щастячко важить?
скільки треба ніггерів щоб вони мегатонни того лайна завантажили і часу воно відрендерилось/почало працювати в браузері?Важить 0 Мбайт, якщо бути точнішим ~824 KB (або 6,44 Мбіт), завантажується практично за секунду, відображається теж миттєво, до того ж не забувайте що скорій всього ще й кешується.
Якщо всерівно цього занадто багато можна використати min jq, i вибрати конкретний потрібний елемент, тоді це важити буде 114 KB (0,89 Мбіт).
221VOLT написав:p.s. немає там ніяких підводних каменів!
Є, наприклад витягніть м'яч за межі вікна Windows, відпустіть кнопку, і м'яч "прилипне" до курсора. (а в JQ ні) І ще я думаю можна багато чого найти.
▼Прихований текст
ага, ага, отут не заперечиш -- на найсучаснішому залізі і з гігабітовим інтернетом -- звичайно все буде за секунду
(ні, не буде -- навіть у такому випадку говносайти з ЖутьКверею і купою плагінів тормозять)
втім, не буду розбивати ваші ілюзії стосовно легкості jQ+плагінів, їх надійності,
а також те ваше оправдання, яке читається між рядків ("мені вивчати vanilla.js не лінь, я просто не хочу бо я можу узяти готовеньке, добрі дядьки уже подумали за мене -- і зробили для мене зручне і надійне, тому я не буду напрягатись і думати про зручність і надійність")
на чистому js можна зробити фантастичні речі, обклавшись плагінами -- лише ілюзію хороших речей
ви на ці ілюзії підписались -- вам і страждати при їх краху у вашому відтуально-реальному світі
я це уже пройшов, у вас воно - попереду... успіхів!
ага, ага, отут не заперечиш -- на найсучаснішому залізі і з гігабітовим інтернетом -- звичайно все буде за секунду
(ні, не буде -- навіть у такому випадку говносайти з ЖутьКверею і купою плагінів тормозять)втім, не буду розбивати ваші ілюзії стосовно легкості jQ+плагінів, їх надійності,
а також те ваше оправдання, яке читається між рядків ("мені вивчати vanilla.js не лінь, я просто не хочу бо я можу узяти готовеньке, добрі дядьки уже подумали за мене -- і зробили для мене зручне і надійне, тому я не буду напрягатись і думати про зручність і надійність")на чистому js можна зробити фантастичні речі, обклавшись плагінами -- лише ілюзію хороших речей
ви на ці ілюзії підписались -- вам і страждати при їх краху у вашому відтуально-реальному світі
я це уже пройшов, у вас воно - попереду... успіхів!
Взагалі то, спочатку потрібно вивчити "vanilla.js" перед тим як користуватися JQ, в кого немає базових знань JS не зможе використовувати бібліотеки для JS, хіба не так ?
Що до зручність і надійність JQ я наврядчи засумніваюсь. (навіть цей форму використовує JQ)
Взагалі то, спочатку потрібно вивчити "vanilla.js" перед тим як користуватися JQ, в кого немає базових знань JS не зможе використовувати бібліотеки для JS, хіба не так ?
Що до зручність і надійність JQ я наврядчи засумніваюсь. (навіть цей форму використовує JQ)
так тут пригадується анекдот з реальності --
отакий діалог --
-- я jQ знаю, активно використовую! 
-- класно, а просто на js написати можете *деяка примітивна задача*?
-- не, і не треба -- мені jQ вистачає [нафіга вчити якусь байду голову забивати -- плагінів фікаг-фігак і готово] 
-- 
отак є купа хлопці, які хляпають jQ без знання js))
стосовно наівної впевненості в надійності чужого коду(особливо такого ненадійного напрямку як фронтенд) --
повторюсь --
хоть один раз попадете на бабки і нерви через те що вас підвів кусок чужого лайна коду (який підводить навіть після ваших тестів-перевірок) -- отоді ви поміняєте свою думку (після зіткнення з реальністю)
(на бекенді справи з надійністю чужого лайна коду -- з однієї сторони -- трохи краще [ну обвалюється фронт у якійсь версії якогось браузера, ну є юзерів з тим браузером N% -- нікого то не гребе, окрім пострадавших,, а на сервері стабільний обвал N% запитів -- уже якби не окей], з іншої сторони -- гірше [на фронті втикнуть XSS і зіпруть сотні паролів, а на беку в дирку влізуть -- вкрасти можуть все і всіх ]
як то кажуть -- майте свою голову на своїх плечах, а не надіятись на чиюсь задницю турботу --
ще раз нагадаю про один з прикладів того, до чого призводить надія на чужий код --
призводить до взломів, починаючи від взломів тисячами пачками вордпресс-джумла-сайті і до https://habrahabr.ru/post/70330/ -- доречі цей пост на хабрі все ще оцінений як найпопулярніший за всі часи існування хабру)
Взломить JQ не можна, бо якщо взломають JQ то взломають і JS. Все що робить JQ це спрощує написання скрипта.
Наприклад, якщо взломають JQ я можу зайти на ваш сайт (де немає JQ) підключити JQ і виконати будь-які дії.
Як це робиться ? Відкриваєте консоль браузера, і пишете що завгодно. Наприклад можна замінити "Український форум програмістів → HTML та CSS → Як зробити мож..." на свій вміст (на клієнті звичайно)
document.getElementById('brd-crumbs-top').innerHTML = 'hacking';Або тим же JQ, додавши його перед цим.
$('#brd-crumbs-top').html('hacking');Що до вашого анекдоту, він звичайно правдивий, я зустрічав таких людей що вважають що JQ маю унікальний функціонал.
Наприклад, такі люди зазвичай дуже дивуються коли дізнаються що '$' - selector можна використовувати і без JQ (тобто створити самому)
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
<div id="demo"></div>
</body>
<script type="text/javascript">
var $ = function(selector)
{
return document.getElementById(selector)
}
$('demo').innerHTML = "$ - I do it";
</script>
</html>або щоб він працював як в JQ
var $ = function(selector)
{
var action = selector[0];
var element = selector.substring(1, selector.length);
if(action[0]=='#')
return document.getElementById(element)
else if(action[0]=='...')
return document. ...
}До речі хто автор анекдоту ?
стосовно падінь і дир -- я про jQ-плагіни, а не сам лишень скрипт jQ (в останньому лише оверхед, втім, ви ж знаєте як js працює? якщо випадає помилка -- робота скрипта зупиняється, так от - і в самому jQ також може бути)
(то ж нічого, що js не обмежується лише роботою з DOM ?)) )
то не зовсім анекдот - то з реальної бесіди, хоть і ржака і жах одночасно
Сторінки 1
Для відправлення відповіді ви повинні увійти або зареєструватися