如何在drop事件jquery上获取丢弃的区域id?

时间:2013-05-27 15:22:45

标签: jquery jquery-ui jsf-2

我需要我的区域的id可以在p:datatable中放置。 我可以删除元素的文本,但不能删除区域的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();

        }

我怎么能得到这个区域的id,就像ui.xxx一样?

1 个答案:

答案 0 :(得分: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; }