AnsweredAssumed Answered

how to add drag and drop in the myspace droplet

Question asked by seraphon on Jul 6, 2007
Latest reply on Jul 20, 2007 by 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

Outcomes