CSS - 使可拖动的自定义列表项响应

Question

我有一个非常广泛的计划，我有：

<ul>
  <li class="courseBox">...lots of content...</li>
  <li class="courseBox">...lots of content...</li>
  <li class="courseBox">...lots of content...</li>
</ul>

我所有的＆＃34; courseBox＆＃34;元素是可拖动的元素，<ul>是可放置的元素。使用javascript将课程框添加到其中，并且它们首先响应。但是，当将<li>拖到另一个<ul>时，它会停止响应。有谁知道问题可能是什么？

courseBox上使用的唯一样式如下：

.courseBox {
  position: relative;
  border: thin solid #999;
  padding-top: 5px;
  padding-left: 5px;
  padding-bottom: 5px;
  margin-bottom: 5px;

  background: -webkit-linear-gradient(firebrick, darkred); /* For Safari 5.1   to 6.0 */
  background: -o-linear-gradient(firebrick, darkred); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(firebrick, darkred); /* For Firefox 3.6 to 15 */
  background: -ms-linear-gradient(firebrick, darkred);
  background: linear-gradient(firebrick, darkred); /* Standard syntax */

  color: #fff;
  cursor: move;
}

我创建了这个小JSFiddle来说明问题。

提前致谢..

Answer 1

只需将css-width元素的dropped更改为auto选项drop上的.semester。

这是：

$(".semester").droppable({
    accept: ".courseBox",
    activeClass: "highlight",
    drop: function(ev, ui) {
        var dropped = ui.draggable;
        var droppedOn = $(this);

        $(dropped).detach().css({
            top: 0,
            left: 0
        }).appendTo(droppedOn).css('width', "auto"); //this here
    }
});

与drop

的.basket - droppable选项相同

<强>

的 DEMO HERE