XM624

Thanks a lot, that was the problem! As for my understanding, one can restrict the movement with the bounds setting. To me "window" would mean the whole page, but as I'm writing this, it comes to me that that would be something like "page" (or nothing at all). I removed that setting from my website's code and it works as expected. Thanks again, now this is perfectly usable

Finally got it running: https://codepen.io/XM624/pen/XWpaKMw As you can see, just after loading the images, they move up a bit to enter the viewport: Thanks for your patience!

Unfortunately, I can't provide a demo through CodePen, as the website in question uses Ajax to load the images after the page is ready (this is because of the possibility to switch directories). I now created a temporary user account on my new website and already uploaded some images for testing purposes. The page for testing: (removed) .htaccess access data: (removed) On (re)loading the page, the images get repositioned by GSAP Draggable to fit inside the browser window, which is NOT what I want. This is even worse on mobile devices (or the mobile testing mode of the desktop browser, I use Brave and Firefox). About the page: This is the editor page of a reviews website. Klicking an image inserts it in the editor textarea including BBCode code. Dragging an image to the "Gallery image" drop area shows it there, this image is used for list views of available reviews. Dragging an image should just copy it's address, which already works, as the image get's shown. After dragging, the image must return to it's original position while making it draggable again without offset. I hope this helps a little on understanding the problems.

Thanks a lot for the hints, I came a decent way with them. But there still are some problems to overcome: I can NOT use display:block; on my draggable elements, because they need to line up on different screen resolutions (desktop, mobile), on initiating with Draggable(), it moves the images into the viewport, destroying my design if their parent element is partially off screen, I cannot get an element's copy to be dragged, so I did without it, but now I need to move back the element on drag end, which I currently can only get done by reloading the images (removing or resetting the filter:translate3d only works partially as it picks up the new position on a new dragstart), Following is the part of the code in question: function reloadImages() { $('#UploadForm').attr('action', '{UPLOADFORM_ACTION}' + $('#Directory').val().replace(/\//g, '%2F') + '%2F'); $.ajax({ url: $('#ReviewForm').attr('action'), type: 'get', data: 'images-only=' + $('#Directory').val(), success: function(data) { $('#OwnFiles a').remove(); $('#OwnFiles').append(data); Draggable.create('#OwnFiles a', { type: 'x,y', bounds: window, onClick: function(e) { e.preventDefault(); if (e.button == 0) { var textarea = $('#Content')[0]; var url = e.target.attributes['data-img-path']['nodeValue']; var scrollTop = textarea.scrollTop; var scrollLeft = textarea.scrollLeft; if ((url != '') && (url != null)) { if (document.selection) { textarea.focus(); var sel = document.selection.createRange(); sel.text = '[img]' + url + '[/img]'; } else { var len = textarea.value.length; var start = textarea.selectionStart; var end = textarea.selectionEnd; var sel = textarea.value.substring(start, end); //alert(sel); var rep = '[img]' + url + '[/img]'; textarea.value = textarea.value.substring(0, start) + rep + textarea.value.substring(end, len); textarea.scrollTop = scrollTop; textarea.scrollLeft = scrollLeft; textarea.selectionStart = (start + rep.length); textarea.selectionEnd = (start + rep.length); } } textarea.focus(); } }, onDragStart: function() { imgUrl = this.target.attributes['data-img-path']['nodeValue']; }, onDragEnd: function(e) { e.preventDefault(); if (this.hitTest('#GalleryImagePreview')) { $('#GalleryImage').val(imgUrl); $('#GalleryImagePreview').html('<img src="' + imgUrl + '" alt="" />'); } $('#OwnFiles a').css('transform', 'translate3d(0px, 0px, 0px)'); this.kill(); reloadImages(); } }); } }); } (yes, I do need the click event too). Does anyone have a solution for these problems? Thanks in advance!

Hey there, I'm sorry if this question (or something similar) has been answered before, but I didn't find a way to search through the forum. I need to be able to drag an image (or the link it is in) out of a list of images, but leave the original image visually there. On dropping, I want to see where it is dropped, and if it is an a special area, just use an individual property (data-img-path) to create an img tag there. And if it is dropped outside this special area, I need exactly nothing to happen, the original image always stays at it's original location. I have done this with jQuery without problems, but that doesn't work on mobile (touch) devices, and that's why I came to using GSAP with Draggable, but I can't find out how to do this. Thanks a lot in advance! Kind regards XM624