jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化

標題: [Jquery UI]請問Droppable如何取得拖曳之後圖片的ID呢 [打印本頁]

作者: awelkije 時間: 2009-11-27 20:36 標題: [Jquery UI]請問Droppable如何取得拖曳之後圖片的ID呢

<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<script>
$(function(){
        var $container = $('#container');

 $("img").click(function () {
                alert(this.id);                           
        
});   

        $(".obj").draggable({
                cursor: 'move',
                helper:'clone',
                scope:'mydrag'
         });
        $container.droppable({
                accept: '.obj',
                activeClass: 'myactive',
                hoverClass: 'myhover',
                scope:'mydrag',
                drop: function(e,ui) {
        $(ui.draggable).clone().appendTo($(this)).resizable().parent().draggable({containment: '#container'});
                }
        });
});

</script>
<link type="text/css" href="css/smoothness/jquery-ui-1.7.1.custom.css" rel="stylesheet" />
 
<style>

#container {
        height: 98%;
        width: 50%;
        border: 3px solid #ccc;
        float: left;
}
#headlist {
        float: right;
        height: 20%;
        width: 48%;
        border: 1px solid #ccc;
        clear: none;
}

#hairlist {
        height: 20%;
        width: 48%;
        border: 1px solid #ccc;
        float: right;
        margin-top: 5px;
}
.myactive {
        opacity: 0.2;
        filter:alpha(opacity:20);
}
.myhover {
        border: 5px solid red;
}
#headlist  img { 
        cursor: move; 
}
#hairlist  img { 
        cursor: move; 
}
</style>

 
</head>
<body>


<div id="container">
</div>
 <div id="headlist">
  
  <img src="images/1.jpg" width="100" height="100" class="obj" id="a" />
   <img src="images/2.jpg" width="100" height="100" class="obj" id="b"/>
  </div>
<div id="hairlist">
  <img src="images/a.png" width="100" height="100" class="obj"  id="c"/>
   <img src="images/b.png" width="100" height="100" class="obj"  id="d"/> 
   <img src="images/c.png" width="100" height="100" class="obj" id="e" />
    <img src="images/d.png" width="100" height="100" class="obj"  id="f"/>
</div>


</body>
</html>

我把圖片拖曳到div為container裡面之後
要怎麼取得在container裡面圖片的ID呢

作者: wmh 時間: 2009-11-27 20:42

 $(ui.draggable).clone().appendTo($(this)).resizable().parent().draggable({containment: '#container'});

你是指 clone 後的這個物件？
直接設定他的 id 即可。

作者: awelkije 時間: 2009-11-27 21:11

是的
請問該如何寫呢?
$("img").click(function () {
alert(this.id);

});

作者: awelkije 時間: 2009-11-27 21:31

要如何在clone之後出來的圖片上面點一下然後alert該id

作者: wmh 時間: 2009-11-27 22:22

如果 clone 後沒有 id，可以這樣給 id：

$(ui.draggable).clone().attr('id, 'xxxx')...

bind click event：

$(ui.draggable).clone().click(function() {alert($(this).id)})...

作者: awelkije 時間: 2009-11-28 12:48

照wmh大大的說法這樣做的話
每拖曳一次圖片就會出現alert 可是內容是undefined
請參考我這個這樣的做法
http://jsgears.com/thread-328-1-1.html

作者: wmh 時間: 2009-11-29 16:53

我試過後發現 clone() 出來的 id 是一樣的，用 $(this).id 的用法也不對，應該是 this.id

歡迎光臨 jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 (http://jsgears.com/)