獲取JQuery的屬性ui.draggable

我使用JqueryUI拖放我的一個頁面，出於某種原因，我似乎無法獲得將ui.draggable對象的屬性傳遞到我的droppable拖放事件。（「src」）和$（ui.draggable）.attr（「src」）都返回undefined，但是如果我鍵入ui.draggable.html（），我將返回html。有任何想法嗎？獲取JQuery的屬性ui.draggable

來源

2010-04-13 Jon

你是否將你的第二個參數命名爲drop（）'ui'？所以： 'drop：function（event，ui）{...' – Pickle 2010-04-13 20:44:50

是的，drop：function（event，ui）{console.log（ui.draggable.attr（「src」））; } – Jon 2010-04-14 12:19:38

我想通了。解決方法是調用ui.draggable.find（「img」）。attr（「src」），我只是假定ui.draggable對象是一個圖像。

來源

2010-04-14 13:21:14 Jon

你能做到這一點的方式，例如

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>New Web Project</title> 
     <script src="jquery-1.5.min.js"></script> 
     <script src="jquery-ui-1.8.16.custom.min.js"></script>   
     <style>   
     body{ 
      margin:0; 
      padding:0; 
     } 

     .box{ 
      display:block; 
      width:100px; 
      height:50px; 
      background-color:green; 
      border:1px solid #000; 
     } 

     #drop{ 
      position:absolute; 
      top:220px; 
      left:220px; 
      width:250px; 
      height:250px; 
      border:1px solid red; 
      background:yellow; 
      z-index:1; 
     } 
     </style> 
     <script type="text/javascript"> 
     $(document).ready(function(){ 

      $('#boxBesar p').each(function(index,element){ 
       $('#boxBesar p:eq('+index+')').css({ 
        'border':'1px solid #000', 
        'width':'100px', 
        'height':'100px', 
        'position':'absolute', 
        'left':(index*200)+10, 
        'z-index':index+2, 
        'color':'black', 
        'text-align':'center', 
        'background':'#ccc' 
       }) 
      }) 

        .draggable({ 
         revert:true 
        }) 

      $('#drop').droppable({ 
        drop:dropIt 
      }) 

      function dropIt(event,ui){ 
          //get an id 
       **var id=ui.draggable.attr('id')** 

          //test an id name 
       alert(id) 
      } 

     }) 
     </script> 
    </head> 


    <body> 
     <div id="boxBesar"> 
      <p id="b1">Box 1</p> 
      <p id="b2">Box 2</p> 
     </div> 

     <div id="parent"> 
      <div id="drop" > 

      </div> 
     </div> 
    </body> 

</html>

來源

2012-01-03 03:13:07 tokei

@喬恩的答案是正確的。解決方法只是簡單地嘗試attr方法，而不事先檢查可拖動元素（否則您會感到困惑）。

給出聲明的jQuery UI的 '拖動' 一個HTML元素：

<img src='some/path/for/this/image' class='draggable_img' title='I am an image!' />

並給予這個 '格' 爲可放開：

<div id='droppable_area'> </div> 

<script> 
$('img.candidate_thumbnail').droppable({ 
    drop: function(event, ui) { 
    console.info('ui.draggable.title:' + ui.draggable.title); 
    console.info('ui.draggable.attr("title"):' + ui.draggable.attr('title')); 
    console.dir('ui.draggable:' + ui.draggable); 
    }  
</script>

而且我得到了：

ui.draggable.title: undefined 
ui.draggable.attr("title"): I am an image! 
ui.draggable: [object Object] 
    -> No Properties

來源

2013-02-25 05:55:32

這個答案留給未來的用戶。只需通過ui.draggable控制檯登錄並展開它，然後使用ui.draggable.context ......等等。你會明白源名是什麼。

console.log(ui.draggable.context.attributes.src.textContent)

來源

2016-06-14 09:06:17

獲取JQuery的屬性ui.draggable

回答

相關問題