在draggable上添加更多div并在sortable中刷新

时间:2014-11-29 05:15:25

标签: jquery html draggable jquery-ui-sortable

我使用draggable和sortable。但是我希望每次我在面板中拖动时都会创建新的div,并且当我将项目放入其中时创建这个div。当我把它放到其他div时删除。但是当我创建div时。它不能放置物品。请帮我 请参阅我的代码http://jsfiddle.net/oyx05qae/

感谢您的帮助。

        <script type="text/javascript">
        $(document).ready(function() {
            add_sortable();
        });
        function add_panel(array) {
            var panel_id = array.panel_id!='undefined' ? array.panel_id : array['panel_id'];
            $('.inside_all_panel').append('<div data-paid="'+panel_id+'" style="width:'+array.panel_width+';height:'+array.panel_height+'" class="panel_show module_go"></div>');
        }
        function add_sortable(){
            $('.module_go').sortable({
                connectWith: '.inside_all_panel .module_go',
                tolerance:'pointer',
                dropOnEmpty: true,
                revert: true,
                placeholder: 'portlet-placeholder',
                stop: function(event, ui) {
                    $('.module_delete').hide();
                    console.log("stop item "+ui.item.parent().data('paid'));

                },
                start:function(event, ui) {
                    $('.module_delete').show();
                    console.log("start item "+ui.item.parent().data('paid'));
                    $(".module_go").sortable('refresh');
                },
            });

            $(".module-list").draggable({
              connectToSortable: ".inside_all_panel .module_go",
              helper: "clone",
              revert: "invalid",
              start: function(event, ui) {
                var array = new Array();
                array['panel_id'] = 'holder';
                array['panel_width'] = '10%';
                array['panel_height'] = 'auto';
                add_panel(array);
                add_sortable();
                $(".module_go").sortable('refresh');
              },
              stop: function(event, ui) {
                $('div[data-paid="holder"]').remove();
              },
            });
        }
    </script>

0 个答案:

没有答案