Есть ли плагин для браузера для перетаскивания и определения координат элементов?

Question

Есть ли плагин для браузера для перетаскивания и определения координат элементов?

Рейтинг: 0Ответов: 1Опубликовано: 16.07.2023

Очень часто сталкиваюсь с задачей, что нужно абсолютно отпозиционировать много иконок на странице.

Приходится делать кучу скриншотов и в фотошопе измерять расстояние, на которые нужно подвинуть ту или иную иконку.

Есть ли какой-то инструмент (возможно плагин для браузера) для того, чтобы прямо на странице курсором передвигать иконку в нужное положение и получать позиционирование (top, right, bottom, left) от родительского блока с position: relative?

html инструменты-разработчика

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Пример является минимальной модификацией кода из документации в данном случае мы делаем toggle класса draggable и при наличии класса отключаем disabled в опциях метода draggable

$(function() {
  $('img').on('click', function(){
    $(this).toggleClass('draggable')
    $(this).draggable({disabled:!$(this).hasClass('draggable')})
  })
});

.draggable { 
  border: 2px dashed black;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div id="draggable" class="ui-widget-content">
  <img src="http://via.placeholder.com/100x150" alt="v">
  <img src="http://via.placeholder.com/150x100" alt="h">
</div>

Есть ли плагин для браузера для перетаскивания и определения координат элементов?

Ответы