保存在数据库后多个div draggable错位

时间:2014-01-11 12:36:02

标签: javascript jquery css

我在数据库中拖拽后保存了div的好位置。但是,当我想显示div时,我有空格:

 <div id="content">
<div id=table_1 class="ui-widget-content"  style= "border: 1px solid #aaaaaa; width: 50px;height: 50px;border-radius: 50%; top:0px; left:0px">vfvv </div>
<div id=table_2 class="ui-widget-content" style= "width: 50px; height: 30px; padding: 0.2em; border: 1px solid #aaaaaa;top:0px; left:0px"> </div></div>

和我的Jquery代码:

<script>
        $(function() {
          var map = new Object();   
            //pour chaque div possedant lattribut class
            $( 'div[class]').each(function(index){}).draggable( 
                {   
                    //l'evenement stop correspond fin du drag
                    stop: function(event, ui) {
                        var position = $(this).position();
                        var $newPosX = ui.offset.left - $(this).offset().left;
                        var $newPosY = ui.offset.top - $(this).offset().top;
                        map[this.id] = ui.offset;       
                }, 
                    // permet de delimiter la zone 
                    containment: "#content"}).click(function() {
                    alert('nouria mais rose');
            });

            $("form input[type=submit]").click(function() {
                var allPosition='';
                for (var m in map){
                allPosition+= m +'-' + map[m].top + '-' + map[m].left+'/';
                }
                 $('input[name=positionTables]').val(allPosition);  
            });

        });


        </script>

问题在于连续的div。 seconde div总是有空间但不是第一个。

1 个答案:

答案 0 :(得分:0)

非常简单的解决方案: 我绝对使用position'properties

<div id=table_1 class="ui-widget-content"  style= position: absolute;....</div>