0

こんにちは、私はここ でjqueryの例から得たこのフィドルを持って
います。

これはhtmlです

<ul>
  <li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
 <div>
<ul id="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>
<div>

そしてjqueryは

    $(function () {
      $("#sortable").sortable({
        revert: true
      });

      $("#draggable").draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
      });
      $("ul, li").disableSelection();
    });

私がする必要があるのは、その黄色いボックスをクリックして複製することです

誰でも私がこれを達成するのを助けることができますか?

私はフロントエンドが初めてなので、私を惜しまないでください。

前もって感謝します

4

3 に答える 3

1

Code , Here The Top "Drag me Down" はドラッグ不可です。複製されたものだけがドラッグ可能です。そして、一番上の黄色のボックスだけが、それを複製するためのクリック イベントを持っています。

$(function() {
$( "#sortable" ).sortable();

$('.ui-state-highlight').on('click',function(){
   var $this =$(this);
   $this.after($this.clone(false).attr('draggable','true'));
})    

$( "ul, li" ).disableSelection();

  $( "#sortable1").sortable({
      items:'[draggable=true]',
      connectWith: "#sortable"
});
});
于 2014-02-19T05:03:23.403 に答える