How can I make a sortable, changeable, addable, removable web-page element?

Question

I'm creating a web-app interface which will allow users to construct sentences by clicking on words/phrases. Each word of phrase will be contained in its own page element, eg. a <div>. So the div class would need to allow:

• dragging into a different order relative to the other divs/words (ie. sorting)
• an X (only visible when hovering over) in the top right corner of its box to remove it completely upon clicking
• changing of font/text upon click actions
• be inserted into the page when the user wishes to add another word

For instance, imagine this is the page (quote marks denote an element):

"Hi, my name is" [Textbox] "I work at..." "and I was born in" [Combobox]

The phrase in italics is 'inactive' and not part of the sentence, but if the user clicked it then it would change to "I work at" [Textbox] and a new div would be added eg. "And also at..." to allow further expansion. The phrases in bold would have a close button /clickable action to get rid of them or make them inactive again. Also they would be draggable to change the order. As you can see I would also need to dynamically insert new textboxes and comboboxes to accommodate more phrases requiring input.

Could somebody give me a brief run down on what steps I need to take? I've seen sortable list elements in JQuery eg. http://jsfiddle.net/ctrlfrk/A4K4t/ which is a start. Would I just need to spruce this up with some basic JavaScript and CSS? Or would I need to use server-side scripting to dynamically add more page content?

To summarize, I need the div to change font/text upon clicking, have a hover-over close button, remove and be inserted upon simple click events, and be sortable by dragging. I also need comboboxes/textboxes to be added/removed in parallel.

Any tips would be greatly appreciated.

Answer 1

You don't need the server for new content unless it is stored or generated there.

Not having done this exact thing before I don't see any grand scheme to implement, I would just add the features incrementally until you get where you need to go. You may have to refactor things a bit along the way, but I probably don't have to tell you that. ;)

One thing you will have to do when you add or delete elements is to rebind the jQuery functions, it won't enough to just call them when the document loads. So put them in a function and call it whenever you add or remove an element.

Regarding your description of the UI behavior, you say that inactive elements can be dragged and that they can be made active by clicking on them. You can do this (just see if the thing has been dragged or not on mouseup to know whether it was drag or a click) but it might not be the best UI design choice, IMO. It wouldn't be the worst thing in the world, but I find it a little frustrating when the wrong thing happens when I try to do something. Of course, implementing and seeing for yourself is probably best.

Answer 2

Sorting: I would implement the phrases in an unordered list (ul) which makes it as simple as

$("#ulId").sortable();

You can make ul/li items stack next to each other in a similar manner to how you make horizontal navigation menus out of ul elements.

A destrunction button: Just use a template li similar to this

<li id="text1Wrapper">
   <span id="text1" 
     onmouseover="javascript:$('text1Remove').fadeIn();"
     onmouseout="javascript:$('text1Remove').fadeOut();"
     onclick="javascript:$('text1Content').
       replaceWith(
         $(document.createElement('input'))
           .attr('type','text')
           .val($('text1Content').text())
       );">
      <span id="text1Content">Text Here</span>
      <img id="text1Remove" 
        style="display: none;" 
        src="./x.jpg" alt="Remove" 
        onclick="javascript:$(this).parent().remove();" 
      />
   </span>
</li>

A quick description: The span mouse over event tells jquery to fade in the remove button (so when you hover, the remove button becomes available).

The span mouse out event tells jquery to fade out the remove button when it's no longer needed (so when you move the mouse off the li, the remove button is no longer visible)

The onclick of the span replaces the span with a text box containing the content of the span. I will leave the "save changes" as an excercise for the reader, since it's essentially the same but in reverse.

Img tag style has display: none to hide it initially. This is essentially the end product of a fadeOut() but without the fade.

The on click event of the remove button gets the parent (the li) and removes it, and all children from the dom.

Note that the events are only put here because it seemed the logical place to explain it. All events in the outer SPAN tag are a useless waste of space, as they will all be overridden when we clone the node in the next section.

Insertion into the page: All you have to do now is

var cloneLi = $('#text1Wrapper').clone();
cloneLi.attr('id', 'text2Wrapper');
var cloneSpan = cloneLi.children('#text1').attr('id', 'text2');
var cloneContent = cloneSpan.children('#text1Content').attr('id', 'text2Content');
var cloneRemove = cloneSpan.children('#text1Remove').attr('id', 'text2Remove');

You will then need to change the mouseover, mouseout and onclick functions of the outer span using jquery events:

cloneSpan.mouseover(function(e) {
   // Insert functionality from template here
});
cloneSpan.mouseout(function(e) {
   // Insert functionality from template here
});
cloneSpan.click(function(e) {
   // Insert functionality from template here
});