1

Тема: Як зробити можливість сування елементу css?

Як зробити сування можливість сування елементу, подібно стандартному вікну віндовс?

2

Re: Як зробити можливість сування елементу css?

мова про це?
http://www.w3schools.com/html/html5_draganddrop.asp

отаке?  - http://www.w3schools.com/html/tryit.asp … raganddrop

Подякували: ostap34PHP1

3

Re: Як зробити можливість сування елементу css?

Як зробити щоб можна булу пересувати це вікно:
http://i.piccy.info/i9/fa30fbea328cf5fb6e6cd2d86c90d253/1486137385/29790/1115255/V_KNO.pnghttp://i.piccy.info/a3/2017-02-03-15-56/i9-10805707/436x371-r/i.gif

4

Re: Як зробити можливість сування елементу css?

Що означає пересувати ? Детальніше опишіть що ви хочете зробити.
Те що ви показали на скріншоті це не вікно віндовс, це скорій всього блок, але хто його зна.

Можливо ви хочете перетягувати блок за допомогою мишки ?

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

Подякували: ostap34PHP1

5

Re: Як зробити можливість сування елементу css?

Betterthanyou написав:

Що означає пересувати ? Детальніше опишіть що ви хочете зробити.
Те що ви показали на скріншоті це не вікно віндовс, це скорій всього блок, але хто його зна.

Можливо ви хочете перетягувати блок за допомогою мишки ?

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

Так, саме це я хотів, дякую!

6

Re: Як зробити можливість сування елементу css?

Просто цікаво, може є версія на чистому JS? :)

7

Re: Як зробити можливість сування елементу css?

ost.bregin2014 написав:

Просто цікаво, може є версія на чистому JS? :)

в вашому js є повідомлення про те, що хтось натиснув мишкою кудись?

8 Востаннє редагувалося Betterthanyou (03.02.2017 21:28:47)

Re: Як зробити можливість сування елементу css?

ost.bregin2014 написав:

Просто цікаво, може є версія на чистому 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;
Подякували: ostap34PHP1

9

Re: Як зробити можливість сування елементу css?

ost.bregin2014 написав:

Просто цікаво, може є версія на чистому JS? :)

В чистому JS звичайно можна самому зробити, а це багато гемору
- потрібно вішати обробники подій нажаття кнопки мишкою (onmousedown) по елементу
- потрібно вішати обробник подій на рух мишкою (onmousemove), і якщо в даний момент кнопка миші є натиснутою, то відповідно почати зміщевання самого блока за мишкою
- потрібно вішати ...
- потрібно вішати ...
- і так далі, всього не переназву, бо по ходу діла може ще щось випливти,


О, тільки що згадав, натомість ось всіх подій із мишею є вже спеціальні, для цього, drag&drop події. https://developer.mozilla.org/en-US/doc … d_Drop_API
можна використати їх

але, мороки із ними ну дуже багато, насправді існує дуже багато факторів, які на перший погляд виглядають дуже просто. Думаєте що переміщення вікон у віндовсі просте? Ніііі! там тоже багато різних івентів, і всі вони між собою якось взаємодіють

наведу вам приклад, щоробити коли два-три елементи є переміщувальними, який із них повинен бути на верхньому плані? який на нижньому? це все потрібно контролювати
або що робити коли елемент дійшов до краю екрану, дозволяти ховатись за екран? хз! тут вже потрібно відштовхуватись від поставленої задачі

Подякували: Betterthanyou, ostap34PHP2

10

Re: Як зробити можливість сування елементу css?

Це я сам написав. Так-сяк робить, головна проблема що елемент миттєво, при натисканні, розташовується в центрі кліка мишки, якщо хочете доробіть.

<!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>
Подякували: ostap34PHP, mike2

11

Re: Як зробити можливість сування елементу css?

mike написав:
ost.bregin2014 написав:

Просто цікаво, може є версія на чистому JS? :)

В чистому JS звичайно можна самому зробити, а це багато гемору
- потрібно вішати обробники подій нажаття кнопки мишкою (onmousedown) по елементу
- потрібно вішати обробник подій на рух мишкою (onmousemove), і якщо в даний момент кнопка миші є натиснутою, то відповідно почати зміщевання самого блока за мишкою
- потрібно вішати ...
- потрібно вішати ...
- і так далі, всього не переназву, бо по ходу діла може ще щось випливти,


О, тільки що згадав, натомість ось всіх подій із мишею є вже спеціальні, для цього, drag&drop події. https://developer.mozilla.org/en-US/doc … d_Drop_API
можна використати їх

але, мороки із ними ну дуже багато, насправді існує дуже багато факторів, які на перший погляд виглядають дуже просто. Думаєте що переміщення вікон у віндовсі просте? Ніііі! там тоже багато різних івентів, і всі вони між собою якось взаємодіють

наведу вам приклад, щоробити коли два-три елементи є переміщувальними, який із них повинен бути на верхньому плані? який на нижньому? це все потрібно контролювати
або що робити коли елемент дійшов до краю екрану, дозволяти ховатись за екран? хз! тут вже потрібно відштовхуватись від поставленої задачі

Я краще візьму готовий варіант на Jquery UI :D

12

Re: Як зробити можливість сування елементу css?

Betterthanyou написав:

Це я сам написав. Так-сяк робить, головна проблема що елемент миттєво, при натисканні, розташовується в центрі кліка мишки, якщо хочете доробіть.

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

я ж кажу, підводних каменів є ціла купа, ось вам і позиціонування блоку відносно самого курсора

Подякували: ostap34PHP1

13 Востаннє редагувалося 221VOLT (04.02.2017 02:10:08)

Re: Як зробити можливість сування елементу css?

ost.bregin2014 написав:

Просто цікаво, може є версія на чистому 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

"ЖутьКвєря нам  нінужьон!"(с) :D

p.s. немає там ніяких підводних каменів!
якщо програмісти які відписались вище - не змогли розібратися в деталях --
це зовсім не означає що не зможете розібратися ви! :) успіхів!

----

Betterthanyou написав:

Що означає пересувати ? Детальніше опишіть що ви хочете зробити.
Те що ви показали на скріншоті це не вікно віндовс, це скорій всього блок, але хто його зна.

Можливо ви хочете перетягувати блок за допомогою мишки ?

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

скільки метрів то лайно щастячко важить?
скільки треба ніггерів щоб вони мегатонни того лайна завантажили і часу воно відрендерилось/почало працювати в браузері?

Подякували: ostap34PHP, Betterthanyou2

14 Востаннє редагувалося Betterthanyou (04.02.2017 14:00:50)

Re: Як зробити можливість сування елементу css?

221VOLT написав:

скільки метрів то лайно щастячко важить?
скільки треба ніггерів щоб вони мегатонни того лайна завантажили і часу воно відрендерилось/почало працювати в браузері?

Важить 0 Мбайт, якщо бути точнішим ~824 KB (або 6,44 Мбіт), завантажується практично за секунду, відображається теж миттєво, до того ж не забувайте що скорій всього ще й кешується.

Якщо всерівно цього занадто багато можна використати min jq, i вибрати конкретний потрібний елемент, тоді це важити буде 114 KB (0,89 Мбіт).

221VOLT написав:

p.s. немає там ніяких підводних каменів!

Є, наприклад витягніть м'яч за межі вікна Windows, відпустіть кнопку, і м'яч "прилипне" до курсора. (а в JQ ні) І ще я думаю можна багато чого найти.

Прихований текст

В JQ ви можете легко модифікувати поведінку
Наприклад в JQ можна "в два кліка" заборонити виходити за межі якогось тега.

$( function() {
            $( "#draggable" ).draggable({ containment: "#containment-wrapper", scroll: false });
        });

#containment-wrapper - ID тега.

Подякували: ostap34PHP1

15

Re: Як зробити можливість сування елементу css?

Betterthanyou написав:
221VOLT написав:

скільки метрів то лайно щастячко важить?
скільки треба ніггерів щоб вони мегатонни того лайна завантажили і часу воно відрендерилось/почало працювати в браузері?

Важить 0 Мбайт, якщо бути точнішим ~824 KB (або 6,44 Мбіт), завантажується практично за секунду, відображається теж миттєво, до того ж не забувайте що скорій всього ще й кешується.

Якщо всерівно цього занадто багато можна використати min jq, i вибрати конкретний потрібний елемент, тоді це важити буде 114 KB (0,89 Мбіт).

221VOLT написав:

p.s. немає там ніяких підводних каменів!

Є, наприклад витягніть м'яч за межі вікна Windows, відпустіть кнопку, і м'яч "прилипне" до курсора. (а в JQ ні) І ще я думаю можна багато чого найти.

Прихований текст

В JQ ви можете легко модифікувати поведінку
Наприклад в JQ можна "в два кліка" заборонити виходити за межі якогось тега.

$( function() {
            $( "#draggable" ).draggable({ containment: "#containment-wrapper", scroll: false });
        });

#containment-wrapper - ID тега.

ага, ага, отут не заперечиш -- на найсучаснішому залізі і з гігабітовим інтернетом -- звичайно все буде за секунду
(ні, не буде -- навіть у такому випадку говносайти з ЖутьКверею і купою плагінів тормозять)

втім, не буду розбивати ваші ілюзії стосовно легкості jQ+плагінів, їх надійності,
а також те ваше оправдання, яке читається між рядків ("мені вивчати vanilla.js не лінь, я просто не хочу бо я можу узяти готовеньке, добрі дядьки уже подумали за мене -- і зробили для мене зручне і надійне, тому я не буду напрягатись і думати про зручність і надійність")

на чистому js можна зробити фантастичні речі, обклавшись плагінами -- лише ілюзію хороших речей

ви на ці ілюзії підписались -- вам і страждати при їх краху у вашому відтуально-реальному світі
я це уже пройшов, у вас воно - попереду... успіхів!

Подякували: ostap34PHP, Betterthanyou2

16

Re: Як зробити можливість сування елементу css?

221VOLT написав:

ага, ага, отут не заперечиш -- на найсучаснішому залізі і з гігабітовим інтернетом -- звичайно все буде за секунду
(ні, не буде -- навіть у такому випадку говносайти з ЖутьКверею і купою плагінів тормозять)

втім, не буду розбивати ваші ілюзії стосовно легкості jQ+плагінів, їх надійності,
а також те ваше оправдання, яке читається між рядків ("мені вивчати vanilla.js не лінь, я просто не хочу бо я можу узяти готовеньке, добрі дядьки уже подумали за мене -- і зробили для мене зручне і надійне, тому я не буду напрягатись і думати про зручність і надійність")

на чистому js можна зробити фантастичні речі, обклавшись плагінами -- лише ілюзію хороших речей

ви на ці ілюзії підписались -- вам і страждати при їх краху у вашому відтуально-реальному світі
я це уже пройшов, у вас воно - попереду... успіхів!

Взагалі то, спочатку потрібно вивчити "vanilla.js" перед тим як користуватися JQ, в кого немає базових знань JS не зможе використовувати бібліотеки для JS, хіба не так ?

Що до зручність і надійність JQ я наврядчи засумніваюсь. (навіть цей форму використовує JQ)

Подякували: ostap34PHP, 221VOLT2

17 Востаннє редагувалося 221VOLT (04.02.2017 23:17:28)

Re: Як зробити можливість сування елементу css?

Betterthanyou написав:

Взагалі то, спочатку потрібно вивчити "vanilla.js" перед тим як користуватися JQ, в кого немає базових знань JS не зможе використовувати бібліотеки для JS, хіба не так ?

Що до зручність і надійність JQ я наврядчи засумніваюсь. (навіть цей форму використовує JQ)

:D  так тут пригадується анекдот з реальності --

отакий діалог --

-- я jQ знаю, активно використовую! 8)
-- класно, а просто на js написати можете *деяка примітивна задача*?  :)
-- не, і не треба -- мені jQ вистачає [нафіга вчити якусь байду голову забивати -- плагінів фікаг-фігак і готово]  :|
--  :o

отак є купа хлопці, які хляпають jQ без знання js))

стосовно наівної впевненості в надійності чужого коду(особливо такого ненадійного напрямку як фронтенд) --
повторюсь --
хоть один раз попадете на бабки і нерви через те що вас підвів кусок чужого лайна коду (який підводить навіть після ваших тестів-перевірок) -- отоді ви поміняєте свою думку (після зіткнення з реальністю)

(на бекенді справи з надійністю чужого лайна коду -- з однієї сторони -- трохи краще [ну обвалюється фронт у якійсь версії якогось браузера, ну є юзерів з тим браузером N% -- нікого то не гребе, окрім пострадавших,, а на сервері стабільний обвал N% запитів -- уже якби не окей], з іншої сторони -- гірше [на фронті втикнуть XSS і зіпруть сотні паролів, а на беку в дирку влізуть -- вкрасти можуть все і всіх  :D  ] 
як то кажуть -- майте свою голову на своїх плечах, а не надіятись на чиюсь задницю турботу --
ще раз нагадаю про один з прикладів того, до чого призводить надія на чужий код --
призводить до взломів, починаючи від взломів тисячами пачками вордпресс-джумла-сайті і до https://habrahabr.ru/post/70330/ -- доречі цей пост на хабрі все ще оцінений як найпопулярніший за всі часи існування хабру)

Подякували: ostap34PHP, Betterthanyou2

18 Востаннє редагувалося Betterthanyou (05.02.2017 00:39:35)

Re: Як зробити можливість сування елементу css?

Взломить 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. ...
        }

До речі хто автор анекдоту ?

Подякували: 221VOLT1

19 Востаннє редагувалося 221VOLT (05.02.2017 00:42:25)

Re: Як зробити можливість сування елементу css?

стосовно падінь і дир -- я про jQ-плагіни, а не сам лишень скрипт jQ (в останньому лише оверхед, втім, ви ж знаєте як js працює? якщо випадає помилка -- робота скрипта зупиняється, так от - і в самому jQ також може бути)
(то ж нічого, що js не обмежується лише роботою з DOM ?)) )

то не зовсім анекдот - то з реальної бесіди, хоть і ржака і жах одночасно

Подякували: Betterthanyou, ostap34PHP2