jQuery UI - 如何恢復拖放的拖拽

我有3個Div，我可以拖動到垃圾桶的圖像。一旦用戶鬆開鼠標的事業部將被丟棄，否則它恢復到原來的位置，這裏是我的代碼：jQuery UI - 如何恢復拖放的拖拽

<div id="draggables"> 
    <div id="d1"> 
     <header>A</header> 
    </div> 
    <div id="d2"> 
     <header>B</header> 
    </div> 
    <div id="d3"> 
     <header>C</header> 
    </div> 
</div> 


<img src="trash.jpg" id="trash" class="semitransparent" /> 

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script> 
<script> 

$(function(){ 
    // draggables... 

    $("#d1,#d2,#d3").draggable({ 
     revert:"invalid" 
    }); 

    $("#trash").droppable({ 

     activeClass:"opaque", 
     drop: function(event, ui){ 

      ui.draggable.fadeOut(function(){ 
       ui.draggable.remove(); 

      }); 
     } 

    }); 

});

我也申請了activeClass到垃圾桶的圖像，從而使用戶意識到他們可以拖動/該功能是活動的。但是，我想擴展我的代碼，因此當Div被丟棄時，它會恢復到「可拖動」Div內的原始位置。我不確定是否在可拖動元素上使用助手克隆，或者在函數內以某種方式附加到「可拖動」div。有人有建議嗎？有沒有類似的方法：ui.draggable.restore();我可以使用？

如果我的措辭不好，請讓我知道，我會重新提出這個問題。

來源

2012-01-16 Mike Sav

我認爲你正在尋找revert選項：
http://jqueryui.com/demos/draggable/#option-revert

來源

2012-01-16 15:09:28 bardiir

我使用我，與我的拖拽元素，你怎麼建議我再次使用它？ – 2012-01-16 15:17:58

如果將回復設置爲true，則該元素將在回落後恢復到其原始位置。 – bardiir 2012-01-16 15:55:35

但是我認爲只有在可拖動的拖放沒有被拖放時纔會發生回覆？我可能會在這裏感到困惑 – 2012-01-16 16:07:11

幫手：「克隆」是要走的路，當你做了你的心是否將其從原來的位置，你只用刪除刪除一個.remove（）

來源

2012-03-22 14:23:07 root

除了事實圖像不會想成爲一個投擲的，劇本似乎工作...

看到這個JSFiddle。

來源

2012-04-06 07:41:06

這是我在項目中使用的一些小代碼。

HTML：

<div class="N_COn_USER" name="moh1234"> 
<img class="delople" src="_files/us.png" /> 
</div> 

<div class="N_COn_USER" name="demo1234"> 
<img class="delople" src="_files/us.png" /> 
</div> 

<div class="N_COn_USER" name="foo1234"> 
<img class="delople" src="_files/us.png" /> 
</div>

的Jquery：

$(document).ready(function() { 

    var id ; 
    id = $(".N_COn_USER").draggable({ // the draggable div 
    revert: true, 
    helper: "clone", 
    start: function(event, ui) { 
    id = $(this).attr("name"); // we name each draggable item with its ID or any unique identifier. And here, we grab that value .. 
    } 
}).attr("name"); 

    $("#dropable_file").droppable({ 
    tolerance: 'touch', 
    drop: function() { 

    var agree=confirm('Permantly delete '+ id2 +"?"); 
    if (agree) { 
     $.ajax({ 
     url: 'unfollow', 
     data: 'u=' + id, // we send that ID to a processing page controller 
     type: 'post', 
     success: function(msg){ 
      if(msg == 'bad') // Message Sent, check and redirect 
      {    // and direct to the success page 
      $("#msgbox").html('').addClass('good'); 
      $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox 
      { 
       //add message and change the class of the box and start fading 
       $(this).html('Tcxfgg').removeClass().addClass('error').fadeTo(300,1); // if not deleted, show an error! 

      });  
      } 
      else // if everything went perfectly 
      { 
      $("div[name="+id+"]").fadeOut("slow"); // the item with that unique name gets faded out on success. 
      $("span[name="+id+"]").fadeOut("slow"); // picture of it also should have its own name if it lives outside that DIV. 


      } 
     } 
     }); 

    } else { 
     return false; 
    } 

    } 
    }); 
});

我希望幫助..

來源

2012-06-22 21:35:45 Faisal

jQuery UI - 如何恢復拖放的拖拽

回答

相關問題