search

anseki / plain-draggable

The simple and high performance library to allow HTML/SVG element to be dragged.
https://anseki.github.io/plain-draggable/
MIT License
773 stars 99 forks source link

I struggle with an « Uncaught ReferenceError: PlainDraggable is not defined«  #139

Closed Erwan-BR closed 1 year ago

Erwan-BR commented 1 year ago

Hello,

I tried your incredible library with a really simple exemple, but I don’t know why I have such an error. Here is the simple HTML code i used :


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Test - draggable element</title>
</head>
 
<body>
    <script src="plain-draggable.min.js"></script>
    <p style="background-color: #d4d4d4;">Lorem ipsum dolor sit amet, consectetur
    <span id="draggable" style="background-color: lightskyblue;">adipiscing</span>
    elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</body>
<script>
  draggable = new PlainDraggable(document.getElementById('draggable'));
</script>
</html>

Your help would be really appreciated !

anseki commented 1 year ago

Hi @Erwan-BR, thank you for the comment. The loading the plain-draggable.min.js might have failed. Does the file exist in the same directory with the HTML file?

Erwan-BR commented 1 year ago

Hey @anseki !

Thanks a lot for your fast reply. Nevermind, I made a stupid mistake… I have another question by the way : I read the documentation but I didn’t see any way to drag something and make it go “outside” the box it’s contained. I use your library to move a SVG into a div and I don’t know how to make it goes “outside the div” ? Not sure if it’s clear, if not I will send you a small GIF to explain :)

anseki commented 1 year ago

You have to specify containment option if you want to change area for moving the element.

Erwan-BR commented 1 year ago

Ok thanks. I will check that.

Is it also possible to avoid overwriting everything in the transform attribute ? I am using it for the scale of my SVG (with a zoom+ / zoom- button) but every time i wanna change the position, it just delete everything of the transform attribute.

anseki commented 1 year ago

You can specify leftTop option to make PlainDraggable use left and top CSS properties instead. However, using the scale may be not good way to re-size the element. That changes scale of coordinates of pointer that is moving also. You might have to adjust the scaled coordinates when event is fired.

anseki commented 1 year ago

No reply came, then this abandoned issue is closed.