javascript - jQuery and HTML5 Drag and Drop into Table (Scheduler) - Stack Overflow

admin管理员组

文章数量:1304268

I've been using jsfiddle to try and prototype a scheduler where the items to be scheduled are dragged and dropped into it. I've gotten dragging and dropping from an "unassigned" list and onto the schedule table working. I've also gotten the ability to remove from the schedule table working. What I'm having a difficult time wrapping my head around is moving an item in the table to another part of the table.

The fiddle is located here. I'd appreciate any suggestions on getting internal drag and drop to work. I've been working on this all day and I'm starting to get blurry vision. Oh, and by all means if you think what I'm doing can be done better, please make the change, just let me know what version the fiddle is up to.

UPDATE

As per @SMathew and @darksky I've rebuilt the whole fiddle where I'm not directly shifting the table cells around, but instead their content.

I know you guys remended using divs and/or spans, but I want to use the structure of the table, especially the rowspan to designate the height of the cell in 30 minute increments. It does work a lot better now, with the only bug being moving cells (or moreso their contents) around because I have to restore cells affected by the rowspan at the source site and remove the cells that will conflict with the rowspan at the target site.

The updated fiddle can be found here.

UPDATE 2 (FINAL)

So, I went back to the drawing board again, and after 64 fiddles, I finally got it to do what I want. In the end, the trick to get everything to work fine without manipulating the structure of the table. All I had to do was set cells that are in the way of a rowspan to display: hidden.

Anyway, for anyone whose interested, the new fiddle is here. I did discover that Chrome has some issues handling the API. I've noted them in the fiddle (along with a partial rant).

I've been using jsfiddle to try and prototype a scheduler where the items to be scheduled are dragged and dropped into it. I've gotten dragging and dropping from an "unassigned" list and onto the schedule table working. I've also gotten the ability to remove from the schedule table working. What I'm having a difficult time wrapping my head around is moving an item in the table to another part of the table.

The fiddle is located here. I'd appreciate any suggestions on getting internal drag and drop to work. I've been working on this all day and I'm starting to get blurry vision. Oh, and by all means if you think what I'm doing can be done better, please make the change, just let me know what version the fiddle is up to.

UPDATE

As per @SMathew and @darksky I've rebuilt the whole fiddle where I'm not directly shifting the table cells around, but instead their content.

I know you guys remended using divs and/or spans, but I want to use the structure of the table, especially the rowspan to designate the height of the cell in 30 minute increments. It does work a lot better now, with the only bug being moving cells (or moreso their contents) around because I have to restore cells affected by the rowspan at the source site and remove the cells that will conflict with the rowspan at the target site.

The updated fiddle can be found here.

UPDATE 2 (FINAL)

So, I went back to the drawing board again, and after 64 fiddles, I finally got it to do what I want. In the end, the trick to get everything to work fine without manipulating the structure of the table. All I had to do was set cells that are in the way of a rowspan to display: hidden.

Anyway, for anyone whose interested, the new fiddle is here. I did discover that Chrome has some issues handling the API. I've noted them in the fiddle (along with a partial rant).

• javascript
• jquery
• html
• drag-and-drop

Share Improve this question Follow edited Aug 10, 2012 at 6:35 Gup3rSuR4c asked Aug 2, 2012 at 5:28 Gup3rSuR4cGup3rSuR4c 9,4881414 gold badges7878 silver badges133133 bronze badges 3

• I would review this article quirksmode/blog/archives/2009/09/the_html5_drag.html – darksky Commented Aug 2, 2012 at 5:55
• 1 @darksky, yes, I've read that article. I will point out that it was published some 3 years ago. The spec probably didn't change since, but I'm betting that browser support has probably stabalized and bee more robust. The API isn't that difficult to work with to be honest and at the end of the day the article does me no good in figuring out how to acplish what I want. In fact, I'm betting that what I'm missing in functionality is more regular JavaScript logic than Drag and Drop API logic. – Gup3rSuR4c Commented Aug 2, 2012 at 6:04
• 1 okay. I would personally do this like what Google Calendar is doing: moving divs in front of the calendar table to display events instead of manipulating the table itself like you are doing. – darksky Commented Aug 2, 2012 at 6:22

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

The problem is that you are trying to make the td elements draggable. When you remove/insert td elements from a table like that, you have to create a bunch of empty cells to balance it out. I would suggest keep the table intact and wrap draggable elements in a div or span tag. This way the table structure never changes. Your code will also be much simpler and efficient.

本文标签： javascriptjQuery and HTML5 Drag and Drop into Table (Scheduler)Stack Overflow