Skip to content

Instantly share code, notes, and snippets.

@malero

malero/jquery-sortable-remove-item.1.css

Created September 14, 2010 19:15
Download ZIP

Revisions

  1. malero revised this gist Sep 14, 2010. 2 changed files with 3 additions and 2 deletions.
    3 changes: 1 addition & 2 deletions jquery-sortable-remove-item.1.css
    View file
    Original file line number Diff line number Diff line change
    @@ -11,7 +11,6 @@
    ul.sortable {
    padding-bottom: 5px;
    }
    ul.sortable li {
    padding: 1px 0 1px 0;
    ul.sortable li {
    cursor: pointer;
    }
    2 changes: 2 additions & 0 deletions jquery-sortable-remove-item.1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,11 +1,13 @@
    jQuery(function() {
    // Make all ul.sortable lists into sortable lists
    jQuery('ul.sortable').sortable({
    tolerance: 'pointer',
    cursor: 'pointer',
    dropOnEmpty: true,
    connectWith: 'ul.sortable',
    update: function(event, ui) {
    if(this.id == 'sortable-delete') {
    // Remove the element dropped on #sortable-delete
    jQuery('#'+ui.item.attr('id')).remove();
    } else {
    // Update code for the actual sortable lists
  2. malero revised this gist Sep 14, 2010. 3 changed files with 18 additions and 14 deletions.
    4 changes: 2 additions & 2 deletions jquery-sortable-remove-item.1.css
    View file
    Original file line number Diff line number Diff line change
    @@ -8,10 +8,10 @@
    width: 0;
    overflow: hidden;
    }
    ul.checklist {
    ul.sortable {
    padding-bottom: 5px;
    }
    ul.checklist li {
    ul.sortable li {
    padding: 1px 0 1px 0;
    cursor: pointer;
    }
    2 changes: 2 additions & 0 deletions jquery-sortable-remove-item.1.html
    View file
    Original file line number Diff line number Diff line change
    @@ -6,4 +6,6 @@

    <ul class="sortable">
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    </ul>
    26 changes: 14 additions & 12 deletions jquery-sortable-remove-item.1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,13 +1,15 @@
    jQuery('ul.sortable').sortable({
    tolerance: 'pointer',
    cursor: 'pointer',
    dropOnEmpty: true,
    connectWith: 'ul.sortable',
    update: function(event, ui) {
    if(this.id == 'sortable-delete') {
    jQuery('#'+ui.item.attr('id')).remove();
    } else {
    // Update code for the actual sortable lists
    }
    }
    jQuery(function() {
    jQuery('ul.sortable').sortable({
    tolerance: 'pointer',
    cursor: 'pointer',
    dropOnEmpty: true,
    connectWith: 'ul.sortable',
    update: function(event, ui) {
    if(this.id == 'sortable-delete') {
    jQuery('#'+ui.item.attr('id')).remove();
    } else {
    // Update code for the actual sortable lists
    }
    }
    });
    });
  3. malero created this gist Sep 14, 2010.
    17 changes: 17 additions & 0 deletions jquery-sortable-remove-item.1.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    #sortable-delete {
    height: 18px;
    overflow: hidden;
    background: url('/resources/img/bin.png') 0 50% no-repeat;
    }
    #sortable-delete li {
    height: 0;
    width: 0;
    overflow: hidden;
    }
    ul.checklist {
    padding-bottom: 5px;
    }
    ul.checklist li {
    padding: 1px 0 1px 0;
    cursor: pointer;
    }
    9 changes: 9 additions & 0 deletions jquery-sortable-remove-item.1.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    <ul id="sortable-delete" class="sortable"></ul>
    <ul class="sortable">
    <li>Item 1</li>
    <li>Item 2</li>
    </ul>

    <ul class="sortable">
    <li>Item 3</li>
    </ul>
    13 changes: 13 additions & 0 deletions jquery-sortable-remove-item.1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    jQuery('ul.sortable').sortable({
    tolerance: 'pointer',
    cursor: 'pointer',
    dropOnEmpty: true,
    connectWith: 'ul.sortable',
    update: function(event, ui) {
    if(this.id == 'sortable-delete') {
    jQuery('#'+ui.item.attr('id')).remove();
    } else {
    // Update code for the actual sortable lists
    }
    }
    });