CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-sortablejquery-ui-draggable
Ethan
Ethan

Reputation: 167

jQuery-ui sortable draggable modules running into multiple problems?

(In summation, my problem can be viewed here: http://jsfiddle.net/F5Wve/12/)

So I am trying to fix the code I'm running on the website I'm working on with my friend called, FriendGrid , we are using the jQuery-UI to add sortable modules in a three column interface, unfortunately I'm running into some strange bugs with my code, when I use this jQuery to initiate the draggable interface for modules being arranged inside of the columns which are connected with a connectWith it runs into the problem that the modules clone themselves after being moved, when they should only be moved:

$(".module").draggable({
    handle: $(this).children(".draghandle"),
    opacity: 0.5,
    helper: 'clone',
    revert: 'invalid',
    connectToSortable: '.column'
});

And then when I use this next code to initiate it instead of cloning the modules it at first looks like it's going to move it but then it removes it completely:

$(".module").draggable({
    handle: $(this).children(".draghandle"),
    opacity: 0.5,
    helper: 'original',
    revert: 'invalid',
    connectToSortable: '.column'
});

So either way it neglects to just move it, as one might notice the option I change is the helper, which is the main factor in all this as well, but if the helper is a clone it should just use a clone of itself to be dragged, and if it's set to original it should take the module entirely out of the spot it was in and drag the module itself, but I don't see why it would be causing these weird problems, the current setting on the site is clone, but you'll of course have to make an account to be able to test it, which if you wish you can delete immediately afterwords, and once you're on the site you need to call the javascript function ModularMode(), which if you don't know how can easily be done by entering "javascript: ModularMode();" into your browser (without quotes). I hope I can get some helpful responses, thanks.

Upvotes: 1

Views: 742

Answers (1)

lsuarez
lsuarez

Reputation: 4992

For what it's worth, you're duplicating effort by declaring your elements both draggable and sortable. Sortables have all the same options, so you may as well specify them there. The reason you're having so much trouble with the script is likely that table cells tend to create issues with the kind of CSS positioning attributes the library uses to create the behavior you want. I can't even begin to speculate about the cloning. However, I've managed to accomplish what you're attempting to do by using slightly different markup (unordered lists) and element positioning. You could just as easily use divs wrapping other divs, but float all of your column containers left and it should work out just fine. Check out the example fiddle.

Like with many sortables, the dragged element doesn't always easily snap to the bottom of a list, but it's workable. You'll want to specify a width and min-height attribute for your columns so they don't disappear when you drag all elements from them.

Upvotes: 1

Related Questions