I'm a designer who's relatively new to jQuery, so please bear with me!
I've put together a database query creation program based on a jQuery shopping cart model.
Essentally, the user drags field names and boolean operators to a "cart" area and drops them, thereby creating a list of elements that can be converted to a comma-separated string and saved as a query. The dragged element is actually a clone of the orignal.
The basic sequence of elements in the cart area is:
field name, boolean, constant or field name, optional and/or, etc.
so that you might end up with a string like this:
product,equals,hardcoverbook,and,pubdate,lessthan,12/31/13
which is the same as:
Product = HardcoverBook AND PubDate < 123113
In order to keep a logical sequence in the query creation area, all fields are generally disabled after a field is dropped, thereby restricting the user to dragging an operator; and all boolean operators are disabled after a boolean operator is dropped. Otherwise, you could end up with a nonsensical query, for example:
has,greaterthan,hardcoverbook,newspaper
When a field or operator is dropped, it should be able to be deleted by dragging it to a Trash div.
At the same time, the previous element should no longer be deletable – otherwise, a user could wreak havoc with the query being created by randomly deleting elements.
For example, where "el" is a field name being dragged and dropped, a "deletable" class is added to it as part of the drop function and removed from the previous list elemet:
$(el).addClass("deletable").prev('li').removeClass("deletable");
This part is working fine, i.e., the last-dropped list element can be deleted and previous list elements cannot be deleted.
The problem I'm having is that, if a user drags a list element that's been dropped to the query creation area [the "cart"] a clone of that list element is created. Then, that clone can be dragged, thereby creating another clone.
Since the original drop event appends a comma after a dropped field name or operator [in order to end up with a comma-separated string], I think dragging the dropped field is recreating the initial drop event? You can see that because a comma is being appended to each clone every time the drag is stopped.
I can stop dropped elements from being cloned when they're dragged if I make the "cart" div not sortable – but then I can't drag them to the trash:
$("#cartInv ol").droppable({
accept: "(#catalogProd2 li,#boolean li,#and_or li,#constant li)",
accept: ":not(#catalogInv li,#catalogProd2 li,#catalogRB1 li,#catalogRB2 li)"
}
).sortable("disable");
So – sorry for my long-windedness – to sum up, I need help with preventing a dropped element from being cloned when it's dragged while keeping it "deletable" so it can be dragged to the trash.
I have a complete working version of the page that shows the cloning problem:
A second page shows the behavior when the 'cart'' is made not sortable – the element can't be dragged and therefore isn't cloned, but it also can't be dragged to the trash:
Any help much appreciated!
