jQuery Forum

I am not new to jQuery, however this UI plugin makes me feel like so.

I have a div which has a list. This list is sortable. I also have a remove button and edit button as well as a handler image.

Anytime you click a draggable object for the first time, it sets it's position to absolute (0,0) to the screen and not the container itself. Furthermore, I am using the remove() on the element when clicking remove on the draggable element.

I am at a complete loss. Please see my code below:

jQuery:

1. $(document).ready(function(){
2.     $('.sortable').sortable({
3.         revert:true
4.     });
5.     $('.draggable').draggable({
6.             //handle: '.dragger',
7.             connectToSortable: '.sortable',
8.             cancel:'.remove',
9.             revert: true,
10.             containment: 'parent',
11.             axis: 'y'
12.     });   
13.     //$('.draggable').disableSelection();
14.     $('.input').each(function(){
15.         var default_value = this.value;
16.         $(this).focus(function() {
17.             if(this.value == default_value) {
18.                 this.value = '';
19.             }
20.         });
21.         $(this).blur(function() {
22.             if(this.value == '') {
23.                 this.value = default_value;
24.             }
25.         });
26.     });
27.     $(".toggle img").click(function(event) {
28.         event.preventDefault();
29.         $('img', $(this).parent()).toggle();
30.     });
31.     $('.collapse').click(function(event){
32.         $(this).parent().parent().parent().children('.sortable').slideUp('slow');
33.    
34.     })
35.     $('.expand').click(function(event){
36.         $(this).parent().parent().parent().children('.sortable').slideDown('slow');
37.     })
38.     $('.edit').click(function(){
39.         alert('I will not be censored');
40.     })
41.     //
42.     $('.remove').click(function(){
43.         var answer = confirm('Are you sure you want to delete this testimonial?');
44.         if(answer){
45.             //will do a removal query here of the selected testimonial
46.             $(this).parent().remove();
47.         }
48.     })

HTML:

1.                                 <!-- form Should $_POST the ordered results to the DB for order position on the live site. -->
2.                                 <form id="testimonial-order" method="post" action="#">
3.                             <ul class="sortable">
4.                                 <li class="ui-state-default">
5.                                     <div class="draggable corner-8 blue ui-draggable">
6.                                         <img class="dragger left ui-widget-header" height="22" width="10" alt="Dragger" src="<!--{$rewriteBase}-->image/pixel/btn_drag_handle.png"/>
7.                                         <div class="pixel-name left">elanio 1</div>
8.                                         <img class="edit right" height="13" width="13" alt="edit icon" src="<!--{$rewriteBase}-->images/pixel/btn_edit.png"/>
9.                                         <img class="remove right" height="13" width="13" alt="remove icon" src="<!--{$rewriteBase}-->images/pixel/btn_remove.png"/>
10.                                         <label class="right">published<input type="checkbox"/></label>
11.                                     </div>
12.                                 </li>
13.                                 <li class="ui-state-default">
14.                                     <div class="draggable corner-8 blue ui-draggable">
15.                                         <img class="dragger left ui-widget-header" height="" width="" alt="Dragger" src="<!--{$rewriteBase}-->image/pixel/btn_drag_handle.png"/>
16.                                         <div class="pixel-name left">elanio 12</div>
17.                                         <img class="edit right" height="13" width="13" alt="edit icon" src="<!--{$rewriteBase}-->images/pixel/btn_edit.png"/>
18.                                         <img class="remove right" height="13" width="13" alt="remove icon" src="<!--{$rewriteBase}-->images/pixel/btn_remove.png"/>
19.                                         <label class="right">published<input type="checkbox" checked="checked"/></label>
20.                                     </div>
21.                                 </li>
22.                                 <li class="ui-state-default">
23.                                     <div class="draggable corner-8 blue ui-draggable">
24.                                         <img class="dragger left ui-widget-header" height="" width="" alt="Dragger" src="<!--{$rewriteBase}-->image/pixel/btn_drag_handle.png"/>
25.                                         <div class="pixel-name left">elanio 13</div>
26.                                         <img class="edit right" height="13" width="13" alt="edit icon" src="<!--{$rewriteBase}-->images/pixel/btn_edit.png"/>
27.                                         <img class="remove right" height="13" width="13" alt="remove icon" src="<!--{$rewriteBase}-->images/pixel/btn_remove.png"/>
28.                                         <label class="right">published<input type="checkbox"/></label>
29.                                     </div>
30.                                 </li>
31.                                 <li class="ui-state-default">
32.                                     <div class="draggable corner-8 blue ui-draggable">
33.                                         <img class="dragger left ui-widget-header" height="" width="" alt="Dragger" src="<!--{$rewriteBase}-->image/pixel/btn_drag_handle.png"/>
34.                                         <div class="pixel-name left">elanio 14</div>
35.                                         <img class="edit right" height="13" width="13" alt="edit icon" src="<!--{$rewriteBase}-->images/pixel/btn_edit.png"/>
36.                                         <img class="remove right" height="13" width="13" alt="remove icon" src="<!--{$rewriteBase}-->images/pixel/btn_remove.png"/>
37.                                         <label class="right">published<input type="checkbox"/></label>
38.                                     </div>
39.                                 </li>
40.                                 <li class="ui-state-default">
41.                                     <div class="draggable corner-8 blue ui-draggable">
42.                                         <img class="dragger left ui-widget-header" height="22" width="10" alt="Dragger" src="<!--{$rewriteBase}-->image/pixel/btn_drag_handle.png"/>
43.                                         <div class="pixel-name left">Jelanio 15</div>
44.                                         <img class="edit right" height="13" width="13" alt="edit icon" src="<!--{$rewriteBase}-->images/pixel/btn_edit.png"/>
45.                                         <img class="remove right" height="13" width="13" alt="remove icon" src="<!--{$rewriteBase}-->images/pixel/btn_remove.png"/>
46.                                         <label class="right">published<input type="checkbox"/></label>
47.                                     </div>
48.                                 </li>
49.                                     </div>
50.                                 </li>
51.                             </ul><!-- end .sortable -->