Question

我在这里的情况，我正在尝试拖放，交换div，但是发生了错误，李将被交换

Uncaught Type error, Cannot read the property of undefined.

HTML

<ul class="MatchingComponentAnswerRow cl-lg-column-6 cl-md-column-6 cl-sm-column-6 cl-xs-column-6">  
<li class="MatchingComponentRow MatchingComponentAnswer ui-draggable"> <p>hello <b>option</b></p>  </li>  

<li class="MatchingComponentRow MatchingComponentAnswer ui-draggable"> <p>hello option2</p>  </li>  

<li class="MatchingComponentRow MatchingComponentAnswer ui-draggable"> <p>hello option2</p>  </li>  

</ul>

JAVASCRIPT

$(".MatchingComponentAnswerRow  li").draggable({
              appendTo: "body",
              helper: "clone",
              cursor: "move",
              revert: "invalid"
          });

      initDroppable($(".MatchingComponentAnswerRow  li"));
      function initDroppable($elements) {
          $($elements).droppable({
              activeClass: "ui-state-default",
              hoverClass: "ui-drop-hover",
              accept: ":not(.ui-sortable-helper)",

              over: function(event, ui) {
                  var $this = $(this);
              },
              drop: function(event, ui) {
                  var $this = $(this);
                  var li1 = $('<li>' + ui.draggable.text() + '</li>')
                  var linew1 = $(this).after(li1);

                  var li2 = $('<li>' + $(this).text() + '</li>')
                  var linew2 = $(ui.draggable).after(li2);

                  $(ui.draggable).remove();
                  $(this).remove();

                  initDroppable($(".MatchingComponentAnswerRow  li"));
                  $(".MatchingComponentAnswerRow  li").draggable({
                      appendTo: "body",
                      helper: "clone",
                      cursor: "move",
                      revert: "invalid"
                  });
              }
          });
      }

Fiddle Demo

使用的依赖

1.jquery ui 1.8.16， 2.jquery 1.7.2

请小道，谢谢

Droppables未定义Jquery ui

0 个答案: