how to add drag and drop in the myspace droplet

As we transition to the new Hyland Community, some post links may be temporarily disrupted as we finalize redirects. We apologize for the inconvenience and are working to resolve this as quickly as possible. Details.

seraphon

Hi

May I ask if there is going to be a drag and drop available in the final version  of Alfrescov2.1?
Because right now I m trying to add it but it s not easy.

So here is my first question, will it be better to code the drag and drop myself or to try integrate a drag and drop library like wz_dragdrop.js?

I already tried to integrate it but it is not working.

Here is what i ve done
I ve included the script in myspaces2.get.html.ftl
<script type="text/javascript"

src="/alfresco/service/api/path/content/workspace/SpacesStore/Company%20Home/wz_dragdrop.js"></script>‍

as for the next part I ll have to explain a bit how I changed my file myspacespanel2.get.html.ftl
I ve made it so that there is a first list in my ftl that display only documents and another list who display spaces.
For the first list I ve change some little things. If the document is an image, then instead of showing the usual picture icon put the image itself.

Now to get back to the drag and drop business, I ve read that by giving unique names to the images we want to be able to drag
by adding
<script type="text/javascript">
<!–

SET_DHTML("name1", "name2");

//–>
</script>
before the </body> in an casual html file

So here is what I tried

      <div class="spaceIcon">
         <#if d.isDocument && (d.mimetype = "image/gif" || d.mimetype = "image/jpeg" || d.mimetype = "image/png")>
            <a href="${url.context}${d.url}" target="new" onclick="event.cancelBubble=true"><img class="spaceIconImage" alt="" width="16" height="16" src="${url.context}${d.url}?${d.size}" border=0></a>
         <div style="display:none"><img name=d.name class="spaceIconImage64" alt="" width="64" height="64" src="${url.context}${d.url}?${d.size}"></div>
       
       <script type="text/javascript">
<!–

SET_DHTML(d.name);

//–>
</script>
       
         <#else>
            <a href="${url.context}${d.url}" target="new" onclick="event.cancelBubble=true"><img class="spaceIconImage" alt="" width="16" height="16" src="${url.context}${d.icon16?replace(".gif",".png")}" border=0></a>
         <div style="display:none"><img class="spaceIconImage64" alt="" width="64" height="64" src="${url.context}${d.icon64}"></div>
       </#if>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

But it doesnt work
I m guessing that it cant work anyways because there must be some conflict with the size change animation.
I ve though to change the mouse icon when we click on a picture than drag it, but I dont really know how to code that in javascript..

An advice someone?


Regards
Seraphon

mikeh

Hi,

Nice idea to enable drag and drop - we'd be intersted to see the results.

All the new portlets use the mootools javascript library, which already has support for drag-and-drop elements. See http://docs.mootools.net/ for more help (and they're pretty good on the forums as long as you've read the docs first!)

You probably want to dig into the myspaces.js client-side javascript file, which sets up all the events handlers and animations for the My Spaces portlet. Much better to extend that than try and bolt another library on the side.

Good luck!

Mike