Guys after searching for a while I found this solution, works good on my site, I thought I should share this with others so I wrote the following guide, give a try if you are interested and let me know the result. For easier references I've highlighted codes in color so it will help when copy and paste. I've tested this on the Xenforo 1.4.8 default theme as well as UI.X, both working with no problems.
Make sure you have a backup before doing following changes, I am not responsible for any problem caused.
How to make Xenforo attachment editor draggable:
1.Download tiynDraggable code from jQuery:
tinyDraggable | jQuery Plugin Registry
2.Extract and place jquery.tiny-draggable.min on your server folder xenforoinstallation/js/jquery or anywhere you like, if different please make sure you change the path accrodingly on section 3.
3. Go to backend, appearance, template search, do the following changes:
=====================================================
page_container_js_body , add following to top of it:
=====================================================
<script>
$(function() {
$('#draggable').tinyDraggable({ handle: 'p' });
});
</script>
=====================================================
attachment_editor , add following to top of it:
=====================================================
<xen:require js="js/jquery/jquery.tiny-draggable.min.js" />
Find the code
<div class="AttachmentEditor">, change to
<div id="draggable" class="AttachmentEditor">, which add id="draggable".
=====================================================
EXTRA.css , add following to top of it:
=====================================================
#draggable {
position: fixed;
top: 200px;
right: 200px;
width: 30%;
height: 60%;
overflow: scroll;
z-index: 999999;
background-color: white;
opacity: initial;
display: block;
}
4. You will need to add a title bar of the new attachment editor window to make sure it's only draggable via the title bar, not the window itself. Go to backend again, appearance, template search, do the following changes:
=====================================================
attachment_editor , add following to top of it:
=====================================================
<dl class="attachmentwindow">
<dd class="main">
<span><p>Attachment Editor</p></span>
</dd>
</dl>
=====================================================
EXTRA.css , add following to top of it:
=====================================================
.attachmentwindow {
cursor: move;
background-color: rgb(251, 228, 200);
}
Save all changes and test.
============================================================================================================================================
============================================================================================================================================
I know it's not looking perfect but at least I got a good start, I am quite new to CSS, xenforo, as well as js, I wish someone experienced could help to make this better.
I am planning to make the window more functional:
Re-sizable
Responsive
Semi-transparent when mouse left
Can be closed and reopened by clicking the "upload a file" button.
Maybe more............
