CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-sortable
rob.m
rob.m

Reputation: 10571

How to make jQuery sortable drop on empty column?

Everything works fine but when I drop a column into another column, there is an empty column and I cannot drop anything in there anymore.

HTML

<div class="wrap">
  <div class="column">
      <div class="portlet">
          <div class="portlet-header">Feeds</div>
          <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
      </div>
  </div>
  <div class="column">
      <div class="portlet">
          <div class="portlet-header">News</div>
          <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
      </div>
  </div>
  <div class="column">
      <div class="portlet">
          <div class="portlet-header">Shopping</div>
          <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
      </div>
  </div>
  <div class="column">
      <div class="portlet">
          <div class="portlet-header">Links</div>
          <div class="portlet-content"><img src="https://s-media-cache-ak0.pinimg.com/736x/12/64/da/1264da4a3f18207dc22592102abae40d--frangipani-tattoo-plumeria-flowers.jpg"></div>
      </div>
  </div>
</div>

JS

$(".wrap").sortable({
    connectWith: ".column",
    items: '.portlet',
    placeholder: 'ui-state-highlight',
    forcePlaceholderSize: true,
    distance: 0.5,
    dropOnEmpty: true
});

$(".portlet").resize(function() {
    $(".portlet").css("height", "auto");
});

$(".portlet").resizable().addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
    .find(".portlet-header")
    .addClass("ui-widget-header ui-corner-all")
    .prepend("<span class='ui-icon ui-icon-minusthick'></span>")
    .end()
    .find(".portlet-content");
$(".portlet-header .ui-icon").click(function () {
    $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
    $(this).parents(".portlet:first").find(".portlet-content").toggle();
});
$(".column").disableSelection();

Check the jsFiddle, we start with four columns, but after dragging and dropping, we have empty columns and we cannot drop in them, while I would like to.

Upvotes: 2

Views: 1889

Answers (1)

BlazerBrown
BlazerBrown

Reputation: 76

Here is the working fiddle. The problem was that you were creating the sortable widget on the wrong element. Creating it on the .column element will make it work correctly.

http://jsfiddle.net/WFPaj/124/

$(function () {
    $(".column").sortable({
        connectWith: ".column",
        items: '.portlet',
        placeholder: 'ui-state-highlight',
        forcePlaceholderSize: true,
        distance: 0.1,
        dropOnEmpty: true
    });

    $(".portlet").resize(function() {
        $(".portlet").css("height", "auto");
    });

    $(".portlet").resizable().addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
        .find(".portlet-header")
        .addClass("ui-widget-header ui-corner-all")
        .prepend("<span class='ui-icon ui-icon-minusthick'></span>")
        .end()
        .find(".portlet-content");
    $(".portlet-header .ui-icon").click(function () {
        $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
        $(this).parents(".portlet:first").find(".portlet-content").toggle();
    });
    $(".column").disableSelection();
})

CSS:

.column {
    float: left;
    padding-bottom: 100px;
    background: #eee;
    margin: 10px;
    min-width: 190px;
}

Related Question: jQuery UI drop on empty container/list not working

Upvotes: 1

Related Questions