Перетаскивание объекта в svg.js. Подключение svg.draggable.js

Question

В свободное время изучаю JS для себя. Столкнулся с проблемой при работе с SVG.JS и плагином SVG.DRAGGABLE.JS. Не могу понять как перетаскивать объект. Помогите разобраться с подключением SVG.DRAGGABLE.JS. Пробовал в соответствии с документацией, но ничего не получилось

Заранее спасибо!

let node = document.querySelector('#stk_scheme')
let draw = SVG().addTo(node).size(800, 600)
//-- Корпус СТК --
let stk_x = 100 //Точка размещения корпуса
let stk_y = 470 //Точка размещения корпуса

let stk_a = 2500                // Реальная наружняя ширина кабины
let stk_b = 2100                // Реальная наружняя глубина кабины
let stk_h = 2680                // Реальная наружная высота кабины
let stk_pr = 750                // Реальная ширина проемаS
let stk_t = 60                  // Реальная толщина стенки кабины
let stk_pr_left = 900           // Реальный отступ проема слева
let stk_gkl_v_upindent = 250    // Реальный отступ ГКЛ от корпуса СТК по вертикали от стены, напротив двери
let stk_gkl_h_leftindent = 0    // Реальный отступ ГКЛ от корпуса СТК по горизонтали от стены слева
let stk_gkl_h_rightindent = 200   // Реальный отступ ГКЛ от корпуса СТК по горизонтали от стены справа
let stk_gkl_type = 1

//--Ванна
let bath_a = 740
let bath_b = 1700

let stk_shell_path = `m${stk_x} ${stk_y} 0-${stk_b*0.2} ${stk_a*0.2}-0 0+${stk_b*0.2} -${(stk_a-stk_pr-stk_pr_left)*0.2}+0 0-${stk_t*0.2} ${(stk_a-stk_pr-stk_pr_left-stk_t)*0.2}+0 0-${(stk_b-(stk_t)*2)*0.2} -${(stk_a-(stk_t)*2)*0.2}+0 0+${(stk_b-(stk_t)*2)*0.2} ${(stk_pr_left-stk_t)*0.2}+0 0+${stk_t*0.2} z`

let stk_shell = draw.path(stk_shell_path).fill("#000080").stroke({width:1, color:'#000'}).id('stk_shell')

//-- Умывальник
let sink_rad = 20
let sink_a = 560
let sink_b = 430
let sink_fill = draw.path(`m${stk_x+stk_t*0.2+3+bath_a*0.2} ${stk_y-stk_t*0.2-3-bath_b*0.2} h${sink_a*0.2} v${sink_b*0.2-sink_rad} c 0,0 0,${sink_rad} -${sink_rad},${sink_rad} h-${sink_a*0.2-sink_rad*2} c0,0 -${sink_rad},0 -${sink_rad},-${sink_rad} v-${sink_b*0.2-sink_rad}`).fill('#e6e6fa').stroke({width:0.5, color:'#4d4d4dff'})
let sink_grid1 = draw.path(`m${stk_x+stk_t*0.2+3+bath_a*0.2+10} ${stk_y-stk_t*0.2-3-bath_b*0.2+35} c0,0 0,-10 10,-10 h${sink_a*0.2-10-10-10-10} c0,0 10,0 10,10 v${sink_b*0.2-35-20} c0,0 0,10 -10,10 h-${sink_a*0.2-10-10-10-10} c0,0 -10,0 -10,-10 z`).stroke({width:0.5, color:'#4d4d4dff'}).fill('none')
let sink_grid2 = draw.path(`m${stk_x+stk_t*0.2+3+bath_a*0.2+(sink_a*0.2)/2} ${stk_y-stk_t*0.2-3-bath_b*0.2+(sink_b*0.2)/2} c 0,0 5,0 5,5 c 0,0 0,5 -5,5 c 0,0 -5,0 -5,-5 c0,0 0,-5 5,-5`).stroke({width:0.5, color:'#4d4d4dff'}).fill('none')

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Подбор СТК</title>
    <link rel="stylesheet" href="css/style_stk.css">
    <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/[email protected]/dist/svg.min.js"></script>
</head>
<body>
    <div class="wrapper">
    <!--SVG схема кабины-->
      <div id="stk_scheme" class="stk_scheme"></div>
    </div>
</body>
</html>

БЛОГ НА HUSL

Перетаскивание объекта в svg.js. Подключение svg.draggable.js

Ответы (0 шт):