jQuery UI可拖动和可排序不工作

我试图让拖拉和排序一起工作，但没有运气

有关html代码，请参见此

相关的javascript是：

function makeDraggable(theID) {
$('ul#elements > li.element').each(function() { // TODO: also for templates
    $(this).draggable({
        helper: function() {
            return $('<div style="height: 100px; width: 300px; background: #F9FAFA; box-shadow: 5px 5px 1px rgba(0,0,0,0.1); text-align: center; line-height: 100px; font-size: 28px; color: #16A085"><span class="fui-list"></span></div>');
        },
        revert: 'invalid',
        appendTo: 'body',
        connectToSortable: theID,
        stop: function() {
            pageEmpty();
            allEmpty();
        },
        start: function() {
            // switch to block mode
            $('input:radio[name=mode]').parent().addClass('disabled');
            $('input:radio[name=mode]#modeBlock').radiocheck('check');

            // deactivate design mode
            $('#pageList ul li iframe').each(function() {
                this.contentDocument.designMode = "off";
            });
        }
    });
});
$('#elements li a').each(function() {
    $(this).unbind('click').bind('click', function(e) {
        e.preventDefault();
    });
});
}
function makeSortable(el) {

el.sortable({
    revert: true,
    tolerance: 'pointer',
    placeholder: "drop-hover",
    beforeStop: function(event, ui) {
        console.log('beforeStop');
        var attr = ui.item.attr('data-frames');
        if (typeof attr !== typeof undefined && attr !== false) { // template, build it
            $('#start').hide();

            // clear out old possible frames
            $('#pageList ul:visible li').each(function() {
                $(this).remove();
            });

            // create the new frames
            frameIDs = ui.item.attr('data-frames').split('-');
            heights = ui.item.attr('data-heights').split('-');
            urls = ui.item.attr('data-originalurls').split('-');
            for (x = 0; x < frameIDs.length; x++) {
                toInsert = $('<li><iframe src="' + laroute.route('api.sites.getframe', {id: frameIDs[x]}) + '" frameborder="0" scrolling="0" data-originalurl="' + urls[x] + '"></li>');
                $('#pageList ul:visible').append(toInsert);
                theHeight = heights[x];
                toInsert.find('iframe').uniqueId().height(theHeight + "px");
                toInsert.height(theHeight + "px");
                // add a delete button
                delButton = $('<button type="button" class="btn btn-danger deleteBlock"><span class="fui-trash"></span> remove</button>');
                resetButton = $('<button type="button" class="btn btn-warning resetBlock"><i class="fa fa-refresh"></i> reset</button>');
                htmlButton = $('<button type="button" class="btn btn-inverse htmlBlock"><i class="fa fa-code"></i> source</button>');
                frameCover = $('<div class="frameCover"></div>');
                frameCover.append(delButton);
                frameCover.append(resetButton);
                frameCover.append(htmlButton);
                toInsert.append(frameCover);

                // dropped element, so we've got pending changes
                setPendingChanges(true);

                // setup editor events
                toInsert.find('iframe').load(function() {
                    setEditorEvents($(this));
                    heightAdjustment($(this).attr('id'), true);
                });
                allEmpty();
            }

            // set the tempateID
            templateID = ui.item.attr('data-pageid');

            // make sure nothing gets dropped in the list
            ui.item.html(null);

            // delete drag place holder
            $('body .ui-sortable-helper').remove();
        } else {
            alert('imagge');
            if (ui.item.find('.frameCover > button').size() == 0) {
                // image thumbnails
                console.log(ui.item);
                theHeight = ui.item.find('img').attr('data-height');

                ui.item.html('<iframe src="' + ui.item.find('img').attr('data-srcc') + '" scrolling="no" data-originalurl="' + ui.item.find('img').attr('data-srcc') + '" frameborder="0"><iframe>');

                ui.item.find('iframe').uniqueId();
                ui.item.find('iframe').height(theHeight + "px");
                ui.item.find('iframe').css('background', '#ffffff url(' + baseUrl + 'images/loading.gif) 50% 50% no-repeat');
                ui.item.find('iframe').load(function() {
                    heightAdjustment(ui.item.find('iframe').attr('id'), true);
                });

                // add a delete button
                delButton = $('<button type="button" class="btn btn-danger deleteBlock"><span class="fui-trash"></span> remove</button>');
                resetButton = $('<button type="button" class="btn btn-warning resetBlock"><i class="fa fa-refresh"></i> reset</button>');
                htmlButton = $('<button type="button" class="btn btn-inverse htmlBlock"><i class="fa fa-code"></i> source</button>');
                frameCover = $('<div class="frameCover"></div>');
                frameCover.append(delButton);
                frameCover.append(resetButton);
                frameCover.append(htmlButton);
                ui.item.append(frameCover);

                // dropped element, so we've got pending changes
                setPendingChanges(true);
            } else {
                //sorted
                ui.item.find('iframe').load(function() {
                    $(this).contents().find(pageContainer).html(frameContents)
                })
            }
        }
    },
    stop: function() {},
    start: function(event, ui) {
        if (ui.item.find('.frameCover').size() != 0) {
            frameContents = ui.item.find('iframe').contents().find(pageContainer).html();
        }
    },
    over: function() {
        $('#start').hide();
    }
});
}

makeSortable($('#page1'));
makeDraggable('#page1');

函数makeDraggable（theID）{
$（'ul#elements>li.element'）。每个（function（）{//TODO:也用于模板
$（此）。可拖动({
助手：函数（）{
返回美元（“”）；
},
还原：“无效”，
附于：'正文'，
ConnectToPortable:theID，
停止：函数（）{
pageEmpty（）；
allEmpty（）；
},
开始：函数（）{
//切换到块模式
$（'input:radio[name=mode]'）。parent（）.addClass（'disabled'）；
$（'input:radio[name=mode]#modeBlock'）。radiocheck（'check'）；
//停用设计模式
$（'#pageList ul li iframe'）。每个（函数（）{
this.contentDocument.designMode=“关闭”；
});
}
});
});
$（'#元素li a'）。每个（函数（）{
$（this）.unbind（'click'）.bind（'click'，函数（e）{
e、 预防默认值（）；
});
});
}
函数makeSortable（el）{
可排序的({
回复：对，
公差：“指针”，
占位符：“放置悬停”，
beforeStop：函数（事件、用户界面）{
console.log（'beforeStop'）；
var attr=ui.item.attr（'data-frames'）；
如果（typeof attr！==typeof undefined&&attr！==false）{//template，则构建它
$（'#start'）.hide（）；
//清除旧的可能的框架
$（'#pageList ul:visible li'）。每个（函数（）{
$（this.remove（）；
});
//创建新的框架
frameIDs=ui.item.attr（'data-frames'）.split（'-'）；
高度=ui.item.attr（'data-heights'）.split（'-'）；
URL=ui.item.attr（'data-originalurls'）.split（'-'）；
对于（x=0；x”）；
$（“#页面列表ul:visible”）.append（toInsert）；
高度=高度[x]；
toInsert.find（'iframe'）.uniqueId（）.height（theHeight+“px”）；
插入高度（高度+像素）；
//添加一个删除按钮
delButton=$（“删除”）；
重置按钮=$（“重置”）；
htmlButton=$（“源”）；
frameCover=$（''）；
frameCover.append（delButton）；
frameCover.append（重置按钮）；
frameCover.append（htmlButton）；
插入。追加（框架封面）；
//已删除元素，因此我们有挂起的更改
setPendingChanges（真）；
//设置编辑器事件
toInsert.find（'iframe'）.load（函数（）{
setEditorEvents（$（此））；
高度调整（$（this）.attr（'id'），true）；
});
allEmpty（）；
}
//设置tempateID
templateID=ui.item.attr（'data-pageid'）；
//确保列表中没有遗漏任何内容
ui.item.html（null）；
//删除拖动占位符
$（'body.ui sortable helper'）.remove（）；
}否则{
警报（“imagge”）；
if（ui.item.find（'.frameCover>button'）.size（）=0）{
//图像缩略图
console.log（ui.item）；
theHeight=ui.item.find（'img'）.attr（'data-height'）；
ui.item.html（“”）；
ui.item.find（'iframe'）.uniqueId（）；
ui.item.find（'iframe'）。高度（theHeight+“px”）；
ui.item.find（'iframe'）.css（'background'，'#ffffffff url（'+baseUrl+'images/loading.gif）50%50%no repeat'）；
ui.item.find（'iframe'）.load（函数（）{
高度调整（ui.item.find（'iframe'）.attr（'id'），true）；
});
//添加一个删除按钮
delButton=$（“删除”）；
重置按钮=$（“重置”）；
htmlButton=$（“源”）；
frameCover=$（''）；
frameCover.append（delButton）；
frameCover.append（重置按钮）；
frameCover.append（htmlButton）；
ui.item.append（框架封面）；
//已删除元素，因此我们有挂起的更改
setPendingChanges（真）；
}否则{
//分类
ui.item.find（'iframe'）.load（函数（）{
$（this）.contents（）.find（pageContainer）.html（frameContents）
})
}
}
},
停止：函数（）{}，
开始：功能（事件、用户界面）{
if（ui.item.find（'.frameCover'）.size（）！=0）{
frameContents=ui.item.find（'iframe'）.contents（）.find（pageContainer.html（）；
}
},
结束：函数（）{
$（'#start'）.hide（）；
}
});
}
makeSortable（$（'page1'）；
使可拖动（“#第1页”）；

我之所以使用html，是因为当我只提取相关部分时，它是现成的，但当as不起作用时

有人能告诉我我做错了什么吗？我已经找了三天了，试了，找了，但没有运气

更新1 从要点中去掉了uselees html，修复了问题的代码语法

---

我注意到问题可能是可排序的不知道DragTable是悬停排序的（或者相反，DragTable不知道是悬停排序的）

我自己发现了问题，这是平面UI js和jQuery UI js之间的冲突，只需重新排序包含即可解决问题

错误：（导致冲突）

正确：（冲突消失）

请注意，根据要点，这些脚本包含在

3rdparty.js

中（使用

Gulp

进行混合）

jquery
jquery-ui
flat-ui

jquery
flat-ui
jquery-ui