jquery - 如何在 jquery ui 中实现可拖动的 div 点？

Question

如何在 jquery ui 中实现可拖动的 div 点？

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.2/jquery-ui.js"></script>
<style type="text/css">
    *{margin:0;padding:0}
    .container{
        margin:50px;
        width:100px;
        height:100px;
        border:1px solid #777;
        position:relative
    }
    .point{
        width:20px;
        height:20px;
        background-color:tan;
        position:absolute;
    }
</style>
<script type="text/javascript">
    $(function(){
        $('.container').click(function (e){
            var offset= $(this).offset();
            var x = e.pageX-offset.left;
            var y = e.pageY-offset.top;
            $('<div class="point" style="left:'+x+'px;top:'+y+'px"></div>').appendTo('.container');
        });

        // it is very convenient using live to trigger new point do something
        $('.point').live('mouseover',function(){
            console.log(1);
        });

        // how to draggable a point automatically , such as live before
        $('.point').draggable();    
        // i want to using this instead : 
        do_draggable();

    });
</script>
<div class="container">
    <div class="point"></div>
</div>

Answer 1

试试这个：- http://jsfiddle.net/aidioo7/BCtHQ/

JS：-

   $(function () {
       $('.container').click(function (e) {
           var offset = $(this).offset();
           var x = e.pageX - offset.left;
           var y = e.pageY - offset.top;
           $('<div class="point" style="left:' + x + 'px;top:' + y + 'px"></div>').appendTo('.container').draggable();
       });
   });