返回列表 發帖

[jquery ui]請問要如何正確取得clone之後 img的 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');
        $(".obj").draggable({
                cursor: 'move',
                helper:'clone',
                scope:'mydrag'
         });
        $container.droppable({
                accept: '.obj',
                activeClass: 'myactive',
                hoverClass: 'myhover',
                scope:'mydrag',
                drop: function(e,ui) {
                        
$("img").click(function () {
$("#textfield").val($(this).attr("id"));
});

        $(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>
<input name="" type="text" id="textfield">

</body>
</html>
隨便拖3個影像到div id為container
例如拖了
ID為
a->b->c
然後 點 a 和點 b 的id 會出現在textfield 然後點c卻沒有反應

[ 本帖最後由 awelkije 於 2009-11-28 13:11 編輯 ]

我看了一下你的 code, 在 bind img click 事件的 $("img").click() 似乎放錯了位置!
目前是在 drop 事件後去 binding,導致每次 drop 都會去 bind 一次,所以應該要把這段搬出來。

回到你的問題,如何正確取得clone之後 img的 id,其實 clone 後的 id 是跟原本的一樣的,
建議你在 clone 後先把 id 改掉,以免後續處理時造成困擾。
To infinity and beyond!

TOP

謝謝
問題已經解決

TOP

返回列表 回復 發帖