なぜこれがうまくいかないのか、私は本当に途方に暮れています.
並べ替え可能なリストを作成するために使用している次のコードがあります。リストは機能し、ソート可能ですが、ユーザーに順序を警告しません。
<html>
<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script type="text/javascript" href="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src='js/jquery.sortable.js'></script>
<script language="javascript" type="text/javascript">
$(function() {
$("#projectItems").sortable({
update: function (event, ui) {
var order = $(this).sortable('toArray').toString();
alert(order);
}
});
});
</script>
</head>
<body>
<div id="projectItems">
<div id="item1">(1)</div>
<div id="item2">(2)</div>
<div id="item3">(3)</div>
<div id="item4">(4)</div>
<div id="item5">(5)</div>
</div>
</body>
</html>
私はこのフィドル リンクで同じコードを使用していますが、うまく動作しているように見えますか? http://jsfiddle.net/FUXys/1/
エラーコンソールにもエラーはありません。
フィドルでまったく同じように機能するのに、なぜこれが注文に警告しないのでしょうか?
アドバイスや助けをいただければ幸いです。
アップデート
これが私のjquery.sortable.jsのコードです：
/** HTML5 Sortable jQuery Plugin
* http://farhadi.ir/projects/html5sortable
*
* Copyright 2012, Ali Farhadi
* Released under the MIT license.
*/
(function($) {
var dragging, placeholders = $();
$.fn.sortable = function(options) {
var method = String(options);
options = $.extend({
connectWith: false
}, options);
return this.each(function() {
if (/^enable|disable|destroy$/.test(method)) {
var items = $(this).children($(this).data('items')).attr('draggable', method == 'enable');
if (method == 'destroy') {
items.add(this).removeData('connectWith items')
.off('dragstart.h5s dragend.h5s selectstart.h5s dragover.h5s dragenter.h5s drop.h5s');
}
return;
}
var isHandle, index, items = $(this).children(options.items);
var placeholder = $('<' + (/^ul|ol$/i.test(this.tagName) ? 'li' : 'div') + ' class="sortable-placeholder">');
items.find(options.handle).mousedown(function() {
isHandle = true;
}).mouseup(function() {
isHandle = false;
});
$(this).data('items', options.items)
placeholders = placeholders.add(placeholder);
if (options.connectWith) {
$(options.connectWith).add(this).data('connectWith', options.connectWith);
}
items.attr('draggable', 'true').on('dragstart.h5s', function(e) {
if (options.handle && !isHandle) {
return false;
}
isHandle = false;
var dt = e.originalEvent.dataTransfer;
dt.effectAllowed = 'move';
dt.setData('Text', 'dummy');
index = (dragging = $(this)).addClass('sortable-dragging').index();
}).on('dragend.h5s', function() {
dragging.removeClass('sortable-dragging').show();
placeholders.detach();
if (index != dragging.index()) {
items.parent().trigger('sortupdate', {item: dragging});
}
dragging = null;
}).not('a[href], img').on('selectstart.h5s', function() {
this.dragDrop && this.dragDrop();
return false;
}).end().add([this, placeholder]).on('dragover.h5s dragenter.h5s drop.h5s', function(e) {
if (!items.is(dragging) && options.connectWith !== $(dragging).parent().data('connectWith')) {
return true;
}
if (e.type == 'drop') {
e.stopPropagation();
placeholders.filter(':visible').after(dragging);
return false;
}
e.preventDefault();
e.originalEvent.dataTransfer.dropEffect = 'move';
if (items.is(this)) {
if (options.forcePlaceholderSize) {
placeholder.height(dragging.outerHeight());
}
dragging.hide();
$(this)[placeholder.index() < $(this).index() ? 'after' : 'before'](placeholder);
placeholders.not(placeholder).detach();
} else if (!placeholders.is(this) && !$(this).children(options.items).length) {
placeholders.detach();
$(this).append(placeholder);
}
return false;
});
});
};
})(jQuery);