返回列表 發帖

[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呢

 $(ui.draggable).clone().appendTo($(this)).resizable().parent().draggable({containment: '#container'});  
你是指 clone 後的這個物件?
直接設定他的 id 即可。
To infinity and beyond!

TOP

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

TOP

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

TOP

如果 clone 後沒有 id,可以這樣給 id:
$(ui.draggable).clone().attr('id, 'xxxx')...
bind click event:
$(ui.draggable).clone().click(function() {alert($(this).id)})...
To infinity and beyond!

TOP

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

TOP

我試過後發現 clone() 出來的 id 是一樣的,用 $(this).id 的用法也不對,應該是 this.id
To infinity and beyond!

TOP

返回列表 回復 發帖