jQuery / JS ninja wanted for collaboration

"One of the coolest features in MySite is the ability to drag-and-drop elements around the page. Problem is, the feature is a little buggy..."

Hi Ken,

Just reposting one of my comments to add to the discussion:

    http://groups.drupal.org/node/5120#comment-24879

    I've played around with many implementations of Drag & Drop across different platforms. MySite's Drag & Drop
    functionality can sometimes be a bit jumpy. Perhaps others have experienced the same.  The best implementation
    (fast, light and compatible) I've come across is here:

    Example: http://host.sonspring.com/portlets/
    Code: http://sonspring.com/journal/jquery-portlets

    Perhaps MySite could look to implement this to improve the Drag & Drop functionality.

    Thoughts?

As I said on the other thread, but more politely: This comment does not add anything to the discussion.

MySite 5.x uses jQuery Interface, so does the example that you cite. So I fail to see your point.

Interface is the library used in the example you cite, so I don't see how that code could be better than the current code. Perhaps the CSS styling is cleaner and therefore looks better to you?

However, it is possible that newer versions of Interface and jQuery perform better than the one currently implemented in Drupal. The jQuery Interface module does load extra code libraries that we do not use. But the jQuery Interface and jQuery Update modules are the most efficient means of letting people get the code they need.

Do you have answers to either of the above?

--
http://ken.therickards.com/
http://savannahnow.com/user/2
http://blufftontoday.com/user/3

Thanks for your reply.

I am not a jQuery ninja either and I don't know specifically why the example provided appears more smooth on a wider range of platforms (based on my limited testing). It could very well be the newer version of Interface and jQuery. Perhaps the evasive ninja can comment on the techniques used on the example provided and if any of them should be adopted for MySite's drag and drop functionality.

jQuery UI is the official user interface library for jQuery 1.2+. It provides among others, draggables and droppables.

There is already a module that ships with jQuery UI.

Right, but none of the sample jQuery UI code does exactly what we need, so additional work will be needed. In particular, we need the ability to assign multiple draggables inside a region. They should be sortable within that region and droppable onto another region.

The jQuery UI demos don't offer that type of ability. I have started playing with jQuery UI but really need actual code.

--
http://ken.therickards.com/
http://savannahnow.com/user/2
http://blufftontoday.com/user/3

Just to put my 0.02 euros in, i've been working with mysite and a javascript for a few months now. Primarily with getting a more advanced drag and drop solution to work. My client wanted re-sizable and dragable items, they also didnt want to be confined to a set layout/regions.

I used jquery 1.2 (using the back port for 5.X) as well as the draggable and re-sizable UI plugins. The results is very nice, fully customizable layouts, per user. Its not ready to be committed as its highly specialized for this client, however i think this approach may be worth considering (doing away with regions). Instead of region based layouts, we created layout users, who's mysite layout were used as the basis of new accounts and could be switched to and reset in the same way as existing layouts.

The only problem with this is approach is that users are able to have overlapping (and even hidden) items, i've not come up with a good solution for this, yet. But as they can re-set back to their layout default this isn't too much of a problem.

My workload at the moment is very intense, however i will keep my eye on this and help where i can. I will also publish the name and URL of the client when it becomes public, so you can see what im talking about in action.

I had forgotten about this project. I don't think I'm going to adopt totally fluid layouts -- maybe, but I'd have to see it.

If nothing else, I'd like to see the JS code that you use to interact with UI, assuming you had to write some.

--
http://ken.therickards.com/
http://savannahnow.com/user/2
http://blufftontoday.com/user/3

Well, I can make jQuery UI sort. And I can make it drag-and-drop between regions.

But I can't make it do both at once.

Secondary issue: Once an item is dropped, it cannot be dragged again.

--
http://ken.therickards.com/
http://savannahnow.com/user/2
http://blufftontoday.com/user/3

jQuery UI seems to be doing quite well.

I could still use a hand integrating the drag-and-drop with the sort. It looks as though I can do one or the other.

Sample code:

http://mdxlab.com/mysite/

BTW: I could also use some cross-browser testers. Especially PC users.

--
http://ken.therickards.com/
http://savannahnow.com/user/2
http://blufftontoday.com/user/3

Bug reports should go here, please:

http://drupal.org/node/216038

--
http://ken.therickards.com/
http://savannahnow.com/user/2
http://blufftontoday.com/user/3

A while back - before I found mysite - I was starting to create the same thing (why reinvent the wheel, right?).

I found out that interface is no longer supported, and newer versions of jQuery seem to break it, so I started working on jQuery UI.

I have 3 lists that are sortable and droppale to new lists. Please forgive the sloppiness, I havent played with CSS much yet. This was also written in Drupal 6 using the SVN versions of UI, as it is much more stable.

http://beta.wiredbyte.com/drupal-6/?q=gamerpanel

I havent gotten too far on it, and there are some issues in IE (probably CSS issues) but it works fine in FF2.

Very much like that.

In the latest iteration I have, I managed to eliminate the sortables.js file entirely. I'm currently using jQuery UI 1.5a.

http://mdxlab.com/mysite/

Feel free to grab the files from that site and play around. I also don't have items moving aside when sorting occurs, but I could live without that.

How are you doing the Edit panel?

--
http://ken.therickards.com/
http://savannahnow.com/user/2
http://blufftontoday.com/user/3

The site i showed you also is running 1.5a. I don't understand why you are trying to bypass sortables, it makes the page much easier to use when everything moves aside, as people can see where it will drop, and it doesn't cause any issues that i can see with what else you have going on.

Since my test site is very basic still, I'm assuming by edit panel you mean the dialogs? Its the jQuery UI dialog function. Works great, no issues that I have seen. My ultimate goal was to make adding content a simple dialog that brings up a menu of the objects to add, more like iGoogle does.

One issue I have seen with your solution is it does not work in IE6. I'm willing to lend you as much help as I can, but first I want to make sure I understand where you are coming from.

I had issues making sortables work in concert with droppables. So I'd like to know how you arranged that.

In my implementation, it is important to have distinct page regions for tracking, and I wasn't able to sort in one region but drag-drop in another. That is, looking at the code, if I enabled sortables, I could sort within region1 but not move an item to region2 or region3. Or I could move an item from region1 to region2, but not sort. I fixed that by removing dependencies on the sortables. And there are ways to apply highlighting otherwise, but that may not be the best approach.

I am very likely to rewrite from scratch, btw, now that I have a better grasp of what jQuery is actually doing.

And what about IE 6 breaks? I've seen it working on IE 6, but that was a few iterations ago.

--
http://ken.therickards.com/
http://savannahnow.com/user/2
http://blufftontoday.com/user/3

its quite easy, in 1.5 you can specify something like this:

<div id="master">
<div class="region1">
  <div class="sortable"></div>
  <div class="sortable"></div>
  <div class="sortable"></div>
</div>
<div class="region2">
  <div class="sortable"></div>
  <div class="sortable"></div>
  <div class="sortable"></div>
</div>
</div>

then make it sortable:

$('#master').makeSortable({
   items: '.sortable'
});

I love obvious solutions :-). When I started, I was using 1.0. But I didn't use the #master id, which was the problem.

That's why I was going to rewrite the code.

--
http://ken.therickards.com/
http://savannahnow.com/user/2
http://blufftontoday.com/user/3

Took me about a day to get that, and I finally got to the point where i said "this has got to be obvious"

Saves you a few days of rewrite eh?

I have been very impressed with UI1.5

I'd really like to see your example but the link provided doesn't show me anything.

Thanks,
John

that would be because I moved it.

its a little further along than when I posted, but it can be found here:

http://beta.wiredbyte.com/drupal/gamerpanel

please note it is far from perfect