1

有人可以帮我解决以下问题吗？

我正在使用 jQuery Droppable 购物车演示 UI ..

从目录部分拖动元素后，我想将 css 类添加到相关<li>标签。

例如：从目录div 中删除“ Lolcat 衬衫”后，拖动时应附加“ dropInCart ”css 类...即我的 html 应如下所示。<li>

<div id="catalog">
      <ul>
        <li class="dropeedInCart">Lolcat Shirt</li>
        <li>Cheezeburger Shirt</li>
        <li>Buckit Shirt</li>
      </ul>
  </div>

HTML

<div id="products">
  <h2>Drag</h2>
  <div id="catalog">
      <ul>
        <li>Lolcat Shirt</li>
        <li>Cheezeburger Shirt</li>
        <li>Buckit Shirt</li>
      </ul>
  </div>
</div>

<div id="cart">
  <h2>Drop</h2>
  <div class="ui-widget-content">
    <ol>
      <li class="placeholder">Add your items here</li>
    </ol>
  </div>
</div>

jQuery

$(function() {
    $( "#catalog li" ).draggable({
      appendTo: "body",
      helper: "clone"
    });
    $( "#cart ol" ).droppable({
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      accept: ":not(.ui-sortable-helper)",
      drop: function( event, ui ) {
        $( this ).find( ".placeholder" ).remove();
        $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
      }
    }).sortable({
      items: "li:not(.placeholder)",
      sort: function() {
        $( this ).removeClass( "ui-state-default" );
      }
    });
  });

小提琴

4

0 回答 0