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!