将LI元素中的参数传递给jQuery droppable

Question

我可以向LI元素添加一个参数，以便我可以在jQuery中的droppable中检索它吗

目前我有：

drop: function(event, ui) { 
   var theText = ui.draggable.text();
}

但我需要访问LI元素中的参数吗？

Answer 1

您可以在data-*代码中添加li属性，也可以在input[type=hidden]内加li并将参数存储在那里。

Answer 2

试试这个示例程序。它可以帮助您满足您的要求

        $(document).ready(initialize);
        function initialize() 
        {
            $("#divFields li").draggable
            ({
                helper: "clone"
            });


            $("#divDroppedFields").droppable
            ({
                accept: "#divFields li",
                drop: function (event, ui)
                {
                    $(this).find('#txtMessageFields').append((ui.draggable.attr('data-value')));                        
                }
            });
        }


    <div id="divFields">
        <ul>
            <li data-value="data1">iPhone</li>
            <li data-value="data2">iPod</li>
            <li data-value="data3">iPad</li>
        </ul>
    </div>


  <div id="divDroppedFields" class="ui-widget-content">
        <textarea id="txtMessageFields" cols="50" rows="10"></textarea>
  </div>