私が行っている UI 実験の一環として、ドラッグ アンド ドロップ検索を一緒にハックしました。
これまでのところ、私はこれを持っています:
http://jsfiddle.net/craigie2204/pJDPQ/20/
天気ボタンをドラッグすると、雨のみが表示されます。私の質問は次のとおりです。
たとえば、これは付加的なプロセスでしょうか。ユーザーは、雨を表示する天気をドロップしますが、火曜日もドロップします。では、火曜日に雨が降っているすべての検索結果をテーブルに表示できますか? もしそうなら、これをどのように達成できるかについての参考文献を提供していただけますか。
また、ドロップ可能な div にクラスがあるかどうかを確認する関数に時間間隔を設定しようとしました。これは、ユーザーがドラッグ可能なアイテムを削除すると、この div に関連付けられた文字列が検索から削除されるようにするためです。これは機能していないように見えましたが、これをどのように行うことができるかの方向に私を向けることができるでしょう(可能であれば)。
いつものように、JSfiddle をいじりたい場合は、私のゲストになってください。
PS。上で述べたように、目的のUXを取得するためにネットで見つけたコードのビットをまとめただけなので、コードは一種の断片的です。
みんなありがとう、
クレイグ
$(function () {
var $result = $('.result');
$('.drag').draggable({
});
$('.drop').droppable({
drop: function (e, ui) {
outputResult(ui.draggable);
}
});
setInterval (outputResult(elm), 100);
function outputResult(elm) {
if ($(elm).hasClass('oweatherType')) {
searchTable("rain");
} else if ($(elm).hasClass('oday')) {
searchTable("Tuesday");
} else if ($(elm).hasClass('olocation')) {
searchTable("Scotland");
}
}
});
function searchTable(weatherSelect) {
var table = $('#tblData');
table.find('tr').each(function (index, row) {
var allCells = $(row).find('td');
if (allCells.length > 0) {
var found = false;
allCells.each(function (index, td) {
var regExp = new RegExp(weatherSelect, 'i');
if (regExp.test($(td).text())) {
found = true;
return false;
}
});
if (found === true) $(row).show();
else $(row).hide();
}
});
}