0

次のコードがあり、ポイント (div 内の img とテキスト) が作成されたらドラッグできるようにしようとしています。

<div id="container">
    <img src="images/aoi.png" alt="" />
    <div id="point_panel">
        <form>
            <fieldset id="point_container">
                <img id="point" src="images/point.png" alt="" /><input id="point_name" type="text" />
            </fieldset>
        </form>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $('#point').click(function() {
            var alt = $('#point_name').val();
            $('#container').append('<div class="points"><img src="images/point.png" alt=\"'+alt+'\" />'+alt+'</div>');
        });
        $('.points').draggable({ containment: '#container', stack: '.points', opacity: 0.5, zIndex: 100 });
    });
</script>

ユーザーがフォーム内の画像をクリックすると、同じ画像とテキストを持つ新しい div が作成されます。その div は、コンテナの id を持つ div 内のどこにでもドラッグできる必要があります。

ポイントを作成すると、ドラッグできません。私のコードに欠けているものはありますか?

ありがとう

4

2 に答える 2

1

これを試して：

$(document).ready(function() {
    $('#point').click(function() {
        var alt = $('#point_name').val();
        var el = $('<div class="points"><img src="images/point.png" alt=\"'+alt+'\" />'+alt+'</div>');
        $('#container').append(el);
        $(el).draggable({ containment: '#container', stack: '.points', opacity: 0.5, zIndex: 100 });
    });
});
于 2012-05-28T16:24:59.537 に答える
1 
    $(document).ready(function() {
            $('#point').click(function() {
                var alt = $('#point_name').val();
                $('#container').append('<div class="points"><img src="images/point.png" alt=\"'+alt+'\" />'+alt+'</div>');
                //bind draggable to last inserted div 
                $('#container').find('.points:last').draggable({ containment: '#container', stack: '.points', opacity: 0.5, zIndex: 100 });            
             });
            $('.points').draggable({ containment: '#container', stack: '.points', opacity: 0.5, zIndex: 100 });
        });
于 2012-05-28T16:25:14.537 に答える