0
我试图让draggable和sortable一起工作，但没有运气。jQuery UI可拖动和排序不工作
请参见本gist的HTML代码
的revelant 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');
我已经把所有的HTML，因为当我只提取revelant部分它工作在箱子外面，但是当不工作。
有人能指出我做错了什么吗？我已经3天搜索，尝试，看，没有运气。
更新1
剥离出来uselees HTML代码要点，固定问题的代码语法
我已经指出，这个问题是有可能的排序不知道的是，可拖动是悬停它（或相反，可拖动不知道是悬停排序）