如何在drop event jquery上获取drop area id？

Question

我需要我的区域的id，可放在一个p:datatable中。我可以删除元素的文本，但不能删除area droppable的id，我认为它类似于ui.xxxx，这是我的jquery代码：

 $( init );
            function init() {

            $(".list-items").sortable({
            connectWith: '.list-items',
            items: "li:not(.item.new)",
            placeholder: 'place-holder',
            scroll: false,
            tolerance: "pointer",

                receive : function(e, ui) {

                //alert(ui.item.text());

                    if(ui.item.text()=="51173115") {

                         //$("#myDialog").dialog(dialogOpts);
                         //$(".item").dialog(dialogOpts);

                  jConfirm('item capacite Cuisson epuise vous voulez continue comme meme ?', 'alerte', function(r) {     
                  if(r)   
                  {

                   }
                    else
                    {
                    $(ui.sender).sortable('cancel'); // refuse element to be dropped
                    }
                     });

                    // comfirm dialogue
                    //var answer = confirm("capacite Cuisson epuise vous voulez continue comme meme ?");

                    //if (answer){

                    //}
                    //else{
                        //$(ui.sender).sortable('cancel'); // refuse element to be dropped

                    //}




                    }
                }

        }).disableSelection();

        }

如何在think like ui.xxx中删除区域id ?？

Answer 1

在没有一些HTML和示例的情况下，要准确地看到您试图实现的目标是有点棘手的，我认为您从错误的角度来解决这个问题。您可以检查项目的接收时间，而不是删除项目的时间，如果这样做有意义的话，因此需要触发sortable receive事件。

试试这个jsFiddle demo。

JavaScript:

$(function() {
    $( ".connectedSortable" ).sortable({
      connectWith: ".connectedSortable",
      receive: function( event, ui ) {
          console.log('drop area id: ' + this.id);
      }  
    }).disableSelection();
  });

HTML

<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
</ul>

<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
</ul>

CSS

.connectedSortable { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; }
.connectedSortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }