Folks,
I need a solution that allows drag-and-drop cell over the table.
The cells can be of different colspans, so when the cell is dropped into the middle of another cell, which is bigger, the following steps should be performed:
Another td element is created, which is equal in width to the draggable element.
Cells on left and right of new td element automatically adjust their width.
Now I use JQuery drag-and-drop plug-in. It allows to drag elements, but becomes a bit awkward when it comes to manipulating DOM elements on the part of droppable element.
Could anybody propose some library where this kind of behaviour is implemented?
DragTable might be a good starting point.
Not sure if it supports tables, but I have used link text before and it worked fairly well for me
Related
I'm curious if there is a plugin or so to move the selected word (which is actually within a table cell) from one cell to another one by mouse.
I guess there might be a ready plugin-javascript solution, but I was unable to find it.
The table is not editable. Just simple <table><tr><td>... and so on.
jQuery solution is also acceptable.
P.S. There might be several words or nothing in any table cell. You can select only one word in a cell to pull it by mouse to another cell.
Of course I can reinvent the wheel but probably there is a out of box solution, but I'm still unable to find it.
I've been using jsfiddle.net 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 recommended 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).
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.
I want to make a webpage that allows a user to select and copy an HTML entity with a single click, and using ZeroClipboard should be good enough for this. I want to have tens, maybe even hundreds of copyable HTML entities on the page, so I would prefer not to have a ZeroClipboard client for each entity. The solution I came up with is to have a table of HTML entities where each td contains a different HTLM entity, and captures onmouseover, so I can determine which HTML entity the user wants. Then I glue the ZeroClipboard to this table to capture the onclick. By default the ZeroClipboard object has z-index 99 so it sits over the table. Unfortunately since the ZeroClipboard object has nothing to do with the table semantically the events can't propagate to the td which is hidden underneath.
Is there a way to capture the onclick on the ZeroClipboard object (embed) with a z-index of 99, and also capture the onmouseover on the td that sits underneath with a z-index of 1? Do I need to find the coordinates of the mouse cursor to do this? I would rather not do that because a) it's messy and b) technically impossible with the W3C specifications.
I've frozen two copies of my current code:
ZeroClipboard embed z-index=99 : http://www.aidansean.com/physics/symbols_static.php
(This can copy the "..." contents of the box in the upper left.)
ZeroClipboard embed z-index=-99: http://www.aidansean.com/physics/symbols_static_2.php
(This can change the "..." contents of the box in the upper left.)
I want to combine the functionality of both of these pages. Any help greatly appreciated!
Finally, there you go. Some other options I tried, didn't work. Is this a helpful solution? :)
JSFiddle: Click at embedded with lower z-index
I wrote a TinyMCE plugin for Wordpress that drops a prepared bit of HTML into the textarea when a button on the toolbar is clicked. This is to assist in formatting some relatively complicated elements.
I would like for this piece of HTML to be wrapped in some sort of container that TinyMCE recognizes and allows for easy selection or deletion if needed.
Currently, the only way to delete an individual element is by erasing all of the information each individual "sub element" contains. I can't seem to find any information in the API regarding manually assigning an element as a singular combined object. As far as behavior goes, think "resize frame" or something similar (only this won't need to have any resizing capabilities).
Any ideas?
If you want to wrap text/html inside an element of your choice (i used a span here) at the current cursor position of tinymce editor instance ed you can simply do
ed.execCommand('insertHTML', false, '<span class="custom_to_delete">My_Text</span>');
Having a big html table with many rows that does not fit on the screen, do you know how to focus on a given row with javascript/jquery avoiding the need to scroll down?
Look up the "scrollIntoView" function. It's supported on most elements by (I think) all the browsers.
What I do, when I want to make a table (or something like a table) behave that way, I make sure that the target table row has a special class, or maybe an "id" value. Then I can find the row with Javascript and call "scrollIntoView()". The only thing you have to watch out for is that sometimes IE gets confused and screws up layout around the table, but if you're careful with how you set up scrollable elements it usually can be made to work.