我正在为我的项目使用jQuery UI，特别是selectables和dialogs。当我有一个选定的HTML项目并打开一个对话框时，所选项目将被取消（de）选中。我搜索了为什么它（de）选择它但没有结果。有人知道如何防止这种情况吗？
答案 0 :(得分：0)
在查看你的代码之后我发现了一些缺点，主要与带有我的昵称okai的评论的行有关，所以请查看这个字符串。
因为我不懂你的语言，对不起，我用英语更改了标签移动，我在上下文菜单中测试了移动功能，现在它可以工作了。 我在第一个位置移动了菜单中的移动功能，因此您可以直接在“代码段运行”中看到，而无需在完整模式下打开它。
如果您需要添加该功能以在表格外部点击时取消选择表格行，您可以执行以下操作：
$('html').click(function(e){
....
if ($(e.target).is('html')) {
ins.element.find('.ui-selected').removeClass('ui-selected');
}
让我知道。
$(function () {
$("table tbody.toBeSelected").selectable({
stop: function() {
$(".ui-selected", this)
.each(function() {
var index = $("table tbody").index(this);
});
}
});
$('html').click(function(e){
var ins = $( "table tbody.toBeSelected" ).selectable( "instance" );
// clear the selected list
ins.selectees = [];
// remove the selected class
/*****
*
* okai: The following line is your problem: comment it!
*
*/
//ins.element.find('.ui-selected').removeClass('ui-selected');
});
var context = $('table tbody.toBeSelected').nuContextMenu({
hideAfterClick: true,
items: 'tr.tabledata',
callback: function(key, element) {
if(key === "delete"){
var classElements = document.querySelectorAll("tr.ui-selected td.filename");
var csrf = $('input[name=_token]').val();
for(var x = 0;x < classElements.length;x++){
var result;
result = classElements[x].innerHTML;
$.ajax({
async: true,
method: 'POST',
url: '../public/deletefile',
data: { filename: result, "_token": csrf },
success: function(response) {
$( "tr.ui-selected" ).remove(response);
}
});
};
}
if(key === "download") {
};
if(key === "info") {
fileInfo();
dialogInfo.dialog('open');
};
if(key === "share") {
share();
dialogShare.dialog('open');
};
if(key === 'version') {
dialogVersion.dialog('open');
selectedFile();
}
if(key === 'move') {
dialogMoveTo.dialog('option', 'position', {my: 'center', at: "center", of: $(this) }).dialog('open');
}
},
menu: [
{
name: 'move',
title: 'move',
icon: 'exchange',
class: 'move'
},
{
name: 'download',
title: 'Изтегли',
icon: 'cloud-download',
class: 'download'
},
{
name: 'void'
},
{
name: 'delete',
title: 'Изтрий',
icon: 'trash',
class: 'delete'
},
{
name: 'info',
title: 'Инфромация',
icon: 'info-circle',
class: 'info'
},
{
name: 'share',
title: 'Спдели',
icon: 'share-alt',
class: 'share'
},
{
name: 'version',
title: 'Версии',
icon: 'eye',
class: 'version'
}]
});
var dialogMoveTo;
dialogMoveTo = $( "#dialog-moveto" ).dialog({
autoOpen: false,
resizable: false,
draggable: false,
width: 200,
modal: true,
title: 'Премести',
close: function() {
dialogMoveTo.dialog( "close" );
},
buttons: {
"Премести": function() {
var csrf = $('input[name=_token]').val();
var classElements = document.querySelectorAll("tr.ui-selected td.filename");
var result = classElements[0].innerHTML;
var getSelect = document.getElementById("folders");
var seletedOption = getSelect.options[getSelect.selectedIndex].text;
$.ajax({
async: true,
method: 'POST',
url: '../public/getfolder',
data: {"folder": seletedOption, "filename": result, "_token": csrf},
complete: function(response) {
console.log(response);
}
});
dialogMoveTo.dialog( "close" );
}
}
});
});
(function($, window, document, undefined) {
'use strict';
var plugin = 'nuContextMenu';
var defaults = {
hideAfterClick: false,
contextMenuClass: 'nu-context-menu',
activeClass: 'active'
};
var nuContextMenu = function(container, options) {
this.container = $(container);
this.options = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = plugin;
this.init();
};
$.extend(nuContextMenu.prototype, {
init: function() {
if (this.options.items) {
this.items = $(this.options.items);
}
if (this._buildContextMenu()) {
this._bindEvents();
this._menuVisible = this._menu.hasClass(this.options.activeClass);
}
},
_getCallback: function() {
return ((this.options.callback && typeof this.options.callback ===
'function') ? this.options.callback : function() {});
},
_buildContextMenu: function() {
// Create context menu
this._menu = $('<div>')
.addClass(this.options.contextMenuClass)
.append('<ul>');
var menuArray = this.options.menu,
menuList = this._menu.children('ul');
// Create menu items
$.each(menuArray, function(index, element) {
var item;
if (element !== null && typeof element !=='object') {
return;
}
if (element.name === 'void') {
item = $('<hr>');
menuList.append(item);
return;
}
item = $('<li>')
.attr('data-key', element.name)
.addClass(element.class)
.prepend("<a>" + element.title);
if (element.icon) {
var icon = $('<i>')
.addClass('fa fa-' + element.icon.toString());
item.prepend(icon);
}
menuList.append(item);
});
$('body')
.append(this._menu);
return true;
},
_pDefault: function(event) {
event.preventDefault();
event.stopPropagation();
return false;
},
_contextMenu: function(event) {
event.preventDefault();
// Store the value of this
// So it can be used in the listItem click event
var _this = this;
var element = event.target;
if (this._menuVisible || this.options.disable) {
return false;
}
var callback = this._getCallback();
var listItems = this._menu.children('ul')
.children('li');
listItems.off()
.on('click', function() {
var key = $(this)
.attr('data-key');
callback(key, element);
if (_this.options.hideAfterClick) {
_this.closeMenu();
}
});
this.openMenu();
this._menu.css({
'top': event.pageY + 'px',
'left': event.pageX + 'px'
});
return true;
},
_onMouseDown: function(event) {
// Remove menu if clicked outside
if (!$(event.target)
.parents('.' + this.options.contextMenuClass)
.length) {
this.closeMenu();
}
},
_bindEvents: function() {
if (this.items) {
// Make it possible to bind to dynamically created items
this.container.on('contextmenu', this.options.items,
$.proxy(this._contextMenu,
this));
} else {
this.container.on('contextmenu', $.proxy(this._contextMenu,
this));
}
// Remove menu on click
$(document)
.on('mousedown', $.proxy(this._onMouseDown, this));
},
disable: function() {
this.options.disable = true;
return true;
},
destroy: function() {
if (this.items) {
this.container.off('contextmenu', this.options.items);
} else {
this.container.off('contextmenu');
}
this._menu.remove();
return true;
},
openMenu: function() {
this._menu.addClass(this.options.activeClass);
this._menuVisible = true;
return true;
},
closeMenu: function() {
this._menu.removeClass(this.options.activeClass);
this._menuVisible = false;
return true;
}
});
$.fn[plugin] = function(options) {
var args = Array.prototype.slice.call(arguments, 1);
return this.each(function() {
var item = $(this),
instance = item.data(plugin);
if (!instance) {
item.data(plugin, new nuContextMenu(this, options));
} else {
if (typeof options === 'string' && options[0] !== '_' &&
options !== 'init') {
instance[options].apply(instance, args);
}
}
});
};
})(jQuery, window, document);
var selectable = $.widget("ui.selectable", $.ui.mouse, {
version: "1.11.4",
options: {
appendTo: "body",
autoRefresh: true,
distance: 0,
filter: "*",
tolerance: "touch",
// callbacks
selected: null,
selecting: null,
start: null,
stop: null,
unselected: null,
unselecting: null
},
_create: function() {
var selectees,
that = this;
this.element.addClass("ui-selectable");
this.dragged = false;
// cache selectee children based on filter
this.refresh = function() {
selectees = $(that.options.filter, that.element[0]);
selectees.addClass("ui-selectee");
selectees.each(function() {
var $this = $(this),
pos = $this.offset();
$.data(this, "selectable-item", {
element: this,
$element: $this,
left: pos.left,
top: pos.top,
right: pos.left + $this.outerWidth(),
bottom: pos.top + $this.outerHeight(),
startselected: false,
selected: $this.hasClass("ui-selected"),
selecting: $this.hasClass("ui-selecting"),
unselecting: $this.hasClass("ui-unselecting")
});
});
};
this.refresh();
this.selectees = selectees.addClass("ui-selectee");
this._mouseInit();
this.helper = $("<div class='ui-selectable-helper'></div>");
},
_destroy: function() {
this.selectees
.removeClass("ui-selectee")
.removeData("selectable-item");
this.element
.removeClass("ui-selectable ui-selectable-disabled");
this._mouseDestroy();
},
_mouseStart: function(event) {
var that = this,
options = this.options;
this.opos = [ event.pageX, event.pageY ];
if (this.options.disabled) {
return;
}
this.selectees = $(options.filter, this.element[0]);
this._trigger("start", event);
$(options.appendTo).append(this.helper);
// position helper (lasso)
this.helper.css({
"left": event.pageX,
"top": event.pageY,
"width": 0,
"height": 0
});
if (options.autoRefresh) {
this.refresh();
}
this.selectees.filter(".ui-selected").each(function() {
var selectee = $.data(this, "selectable-item");
selectee.startselected = true;
if (!event.metaKey && !event.ctrlKey) {
selectee.$element.removeClass("ui-selected");
selectee.selected = false;
selectee.$element.addClass("ui-unselecting");
selectee.unselecting = true;
// selectable UNSELECTING callback
that._trigger("unselecting", event, {
unselecting: selectee.element
});
}
});
$(event.target).parents().addBack().each(function() {
var doSelect,
selectee = $.data(this, "selectable-item");
if (selectee) {
doSelect = (!event.metaKey && !event.ctrlKey) || !selectee.$element.hasClass("ui-selected");
selectee.$element
.addClass(doSelect ? "ui-selecting" : "ui-unselecting");
selectee.unselecting = !doSelect;
selectee.selecting = doSelect;
selectee.selected = doSelect;
// selectable (UN)SELECTING callback
if (doSelect) {
that._trigger("selecting", event, {
selecting: selectee.element
});
} else {
that._trigger("unselecting", event, {
unselecting: selectee.element
});
}
return false;
}
});
},
_mouseDrag: function(event) {
this.dragged = true;
if (this.options.disabled) {
return;
}
var tmp,
that = this,
options = this.options,
x1 = this.opos[0],
y1 = this.opos[1],
x2 = event.pageX,
y2 = event.pageY;
if (x1 > x2) { tmp = x2; x2 = x1; x1 = tmp; }
if (y1 > y2) { tmp = y2; y2 = y1; y1 = tmp; }
this.helper.css({ left: x1, top: y1, width: x2 - x1, height: y2 - y1 });
this.selectees.each(function() {
var selectee = $.data(this, "selectable-item"),
hit = false;
//prevent helper from being selected if appendTo: selectable
if (!selectee || selectee.element === that.element[0]) {
return;
}
if (options.tolerance === "touch") {
hit = ( !(selectee.left > x2 || selectee.right < x1 || selectee.top > y2 || selectee.bottom < y1) );
} else if (options.tolerance === "fit") {
hit = (selectee.left > x1 && selectee.right < x2 && selectee.top > y1 && selectee.bottom < y2);
}
if (hit) {
// SELECT
if (selectee.selected) {
selectee.selected = false;
}
if (selectee.unselecting) {
selectee.$element.removeClass("ui-unselecting");
selectee.unselecting = false;
}
if (!selectee.selecting) {
selectee.$element.addClass("ui-selecting");
selectee.selecting = true;
// selectable SELECTING callback
that._trigger("selecting", event, {
selecting: selectee.element
});
}
} else {
// UNSELECT
if (selectee.selecting) {
if ((event.metaKey || event.ctrlKey) && selectee.startselected) {
selectee.$element.removeClass("ui-selecting");
selectee.selecting = false;
selectee.$element.addClass("ui-selected");
selectee.selected = true;
} else {
selectee.$element.removeClass("ui-selecting");
selectee.selecting = false;
if (selectee.startselected) {
selectee.$element.addClass("ui-unselecting");
selectee.unselecting = true;
}
// selectable UNSELECTING callback
that._trigger("unselecting", event, {
unselecting: selectee.element
});
}
}
if (selectee.selected) {
if (!event.metaKey && !event.ctrlKey && !selectee.startselected) {
selectee.selected = false;
selectee.$element.addClass("ui-unselecting");
selectee.unselecting = true;
// selectable UNSELECTING callback
that._trigger("unselecting", event, {
unselecting: selectee.element
});
}
}
}
});
return false;
},
_mouseStop: function(event) {
var that = this;
this.dragged = false;
$(".ui-unselecting", this.element[0]).each(function() {
var selectee = $.data(this, "selectable-item");
selectee.$element.removeClass("ui-unselecting");
selectee.unselecting = false;
selectee.startselected = false;
that._trigger("unselected", event, {
unselected: selectee.element
});
});
$(".ui-selecting", this.element[0]).each(function() {
var selectee = $.data(this, "selectable-item");
selectee.$element.removeClass("ui-selecting").addClass("ui-selected");
selectee.selecting = false;
selectee.selected = true;
selectee.startselected = true;
that._trigger("selected", event, {
selected: selectee.element
});
});
this._trigger("stop", event);
this.helper.remove();
return false;
}
});#selectable .ui-selecting {
background: #FECA40;
}
#selectable .ui-selected {
background: #F39814;
color: white;
}
#selectable {
list-style-type: none;
margin: 0;
padding: 0;
width: 60%;
}
#selectable li {
margin: 3px;
padding: 0.4em;
font-size: 1.4em;
height: 18px;
}
.nu-context-menu {
background-clip: padding-box;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.10);
border-radius: 5px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
box-sizing: border-box;
display: block;
height: 0;
opacity: 0;
overflow: hidden;
position: absolute;
width: 0;
z-index: 9999;
}
.nu-context-menu.active {
opacity: 1;
height: auto;
width: auto;
}
.nu-context-menu ul {
font-size: 15px;
list-style: none;
margin: 2px 0 0;
padding: 4px 0;
text-align: left;
}
.nu-context-menu ul li a, .nu-context-menu ul li {
clear: both;
color: #777;
cursor: pointer;
font-weight: 400;
line-height: 1.42857;
padding: 5px 0px 5px 5px;
white-space: nowrap;
width: 108px;
text-align: left;
text-decoration: none;
}
.nu-context-menu ul li:hover {
background: #f2f2f2;
color: #333;
}
.nu-context-menu ul hr {
background: #e8e8e8;
border: 0;
color: #e8e8e8;
height: 1px;
margin: 4px 0;
}
/*
*
* okai: Add the following line to make table row selectable
*
*/
.ui-selectable>.ui-selected {
background-color: #a6c9e2;
}<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<div class="content block">
<div id="results">
<table>
<tbody>
<tr>
<th>Number:</th>
<th>Name:</th>
<th>Size:</th>
</tr>
</tbody>
<tbody class="toBeSelected">
<tr class="tabledata">
<td>2</td>
<td class="filename">100KILA - 100 gaidi.mp3</td>
<td>7.93 MB</td>
</tr>
<tr class="tabledata">
<td>1</td>
<td class="filename">3.pdf</td>
<td>385.52 KB</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="dialog-moveto">
<div class="moveto">
<select name="folders" id="folders">
<i class="fa fa-folder-open"></i>
<option>{{ $folder->folder }}</option>
</select>
</div>
</div>
答案 1 :(得分：0)
$(document).ready(function() {
$("table tbody.toBeSelected").selectable({
stop: function() {
$(".ui-selected", this)
.each(function() {
var index = $("table tbody").index(this);
});
}
});
$('html').click(function(){
var ins = $( "table tbody.toBeSelected" ).selectable( "instance" );
// clear the selected list
ins.selectees = [];
// remove the selected class
ins.element.find('.ui-selected').removeClass('ui-selected');
});
var context = $('table tbody.toBeSelected').nuContextMenu({
hideAfterClick: true,
items: 'tr.tabledata',
callback: function(key, element) {
if(key === "delete"){
var classElements = document.querySelectorAll("tr.ui-selected td.filename");
var csrf = $('input[name=_token]').val();
for(var x = 0;x < classElements.length;x++){
var result;
result = classElements[x].innerHTML;
$.ajax({
async: true,
method: 'POST',
url: '../public/deletefile',
data: { filename: result, "_token": csrf },
success: function(response) {
$( "tr.ui-selected" ).remove(response);
}
});
};
}
if(key === "download") {
};
if(key === "info") {
fileInfo();
dialogInfo.dialog('open');
};
if(key === "share") {
share();
dialogShare.dialog('open');
};
if(key === 'version') {
dialogVersion.dialog('open');
selectedFile();
}
if(key === 'move') {
dialogMoveTo.dialog('option', 'position', {my: 'center', at: "center", of: $(this) }).dialog('open');
}
},
menu: [
{
name: 'download',
title: 'Изтегли',
icon: 'cloud-download',
class: 'download'
},
{
name: 'void'
},
{
name: 'delete',
title: 'Изтрий',
icon: 'trash',
class: 'delete'
},
{
name: 'info',
title: 'Инфромация',
icon: 'info-circle',
class: 'info'
},
{
name: 'share',
title: 'Спдели',
icon: 'share-alt',
class: 'share'
},
{
name: 'version',
title: 'Версии',
icon: 'eye',
class: 'version'
},
{
name: 'move',
title: 'Премести',
icon: 'exchange',
class: 'move'
}]
});
var dialogMoveTo;
dialogMoveTo = $( "#dialog-moveto" ).dialog({
autoOpen: false,
resizable: false,
draggable: false,
width: 200,
modal: true,
title: 'Премести',
close: function() {
dialogMoveTo.dialog( "close" );
},
buttons: {
"Премести": function() {
var csrf = $('input[name=_token]').val();
var classElements = document.querySelectorAll("tr.ui-selected td.filename");
var result = classElements[0].innerHTML;
var getSelect = document.getElementById("folders");
var seletedOption = getSelect.options[getSelect.selectedIndex].text;
$.ajax({
async: true,
method: 'POST',
url: '../public/getfolder',
data: {"folder": seletedOption, "filename": result, "_token": csrf},
complete: function(response) {
console.log(response);
}
});
dialogMoveTo.dialog( "close" );
}
}
});
});
(function($, window, document, undefined) {
'use strict';
var plugin = 'nuContextMenu';
var defaults = {
hideAfterClick: false,
contextMenuClass: 'nu-context-menu',
activeClass: 'active'
};
var nuContextMenu = function(container, options) {
this.container = $(container);
this.options = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = plugin;
this.init();
};
$.extend(nuContextMenu.prototype, {
init: function() {
if (this.options.items) {
this.items = $(this.options.items);
}
if (this._buildContextMenu()) {
this._bindEvents();
this._menuVisible = this._menu.hasClass(this.options.activeClass);
}
},
_getCallback: function() {
return ((this.options.callback && typeof this.options.callback ===
'function') ? this.options.callback : function() {});
},
_buildContextMenu: function() {
// Create context menu
this._menu = $('<div>')
.addClass(this.options.contextMenuClass)
.append('<ul>');
var menuArray = this.options.menu,
menuList = this._menu.children('ul');
// Create menu items
$.each(menuArray, function(index, element) {
var item;
if (element !== null && typeof element !=='object') {
return;
}
if (element.name === 'void') {
item = $('<hr>');
menuList.append(item);
return;
}
item = $('<li>')
.attr('data-key', element.name)
.addClass(element.class)
.prepend("<a>" + element.title);
if (element.icon) {
var icon = $('<i>')
.addClass('fa fa-' + element.icon.toString());
item.prepend(icon);
}
menuList.append(item);
});
$('body')
.append(this._menu);
return true;
},
_pDefault: function(event) {
event.preventDefault();
event.stopPropagation();
return false;
},
_contextMenu: function(event) {
event.preventDefault();
// Store the value of this
// So it can be used in the listItem click event
var _this = this;
var element = event.target;
if (this._menuVisible || this.options.disable) {
return false;
}
var callback = this._getCallback();
var listItems = this._menu.children('ul')
.children('li');
listItems.off()
.on('click', function() {
var key = $(this)
.attr('data-key');
callback(key, element);
if (_this.options.hideAfterClick) {
_this.closeMenu();
}
});
this.openMenu();
this._menu.css({
'top': event.pageY + 'px',
'left': event.pageX + 'px'
});
return true;
},
_onMouseDown: function(event) {
// Remove menu if clicked outside
if (!$(event.target)
.parents('.' + this.options.contextMenuClass)
.length) {
this.closeMenu();
}
},
_bindEvents: function() {
if (this.items) {
// Make it possible to bind to dynamically created items
this.container.on('contextmenu', this.options.items,
$.proxy(this._contextMenu,
this));
} else {
this.container.on('contextmenu', $.proxy(this._contextMenu,
this));
}
// Remove menu on click
$(document)
.on('mousedown', $.proxy(this._onMouseDown, this));
},
disable: function() {
this.options.disable = true;
return true;
},
destroy: function() {
if (this.items) {
this.container.off('contextmenu', this.options.items);
} else {
this.container.off('contextmenu');
}
this._menu.remove();
return true;
},
openMenu: function() {
this._menu.addClass(this.options.activeClass);
this._menuVisible = true;
return true;
},
closeMenu: function() {
this._menu.removeClass(this.options.activeClass);
this._menuVisible = false;
return true;
}
});
$.fn[plugin] = function(options) {
var args = Array.prototype.slice.call(arguments, 1);
return this.each(function() {
var item = $(this),
instance = item.data(plugin);
if (!instance) {
item.data(plugin, new nuContextMenu(this, options));
} else {
if (typeof options === 'string' && options[0] !== '_' &&
options !== 'init') {
instance[options].apply(instance, args);
}
}
});
};
})(jQuery, window, document);
var selectable = $.widget("ui.selectable", $.ui.mouse, {
version: "1.11.4",
options: {
appendTo: "body",
autoRefresh: true,
distance: 0,
filter: "*",
tolerance: "touch",
// callbacks
selected: null,
selecting: null,
start: null,
stop: null,
unselected: null,
unselecting: null
},
_create: function() {
var selectees,
that = this;
this.element.addClass("ui-selectable");
this.dragged = false;
// cache selectee children based on filter
this.refresh = function() {
selectees = $(that.options.filter, that.element[0]);
selectees.addClass("ui-selectee");
selectees.each(function() {
var $this = $(this),
pos = $this.offset();
$.data(this, "selectable-item", {
element: this,
$element: $this,
left: pos.left,
top: pos.top,
right: pos.left + $this.outerWidth(),
bottom: pos.top + $this.outerHeight(),
startselected: false,
selected: $this.hasClass("ui-selected"),
selecting: $this.hasClass("ui-selecting"),
unselecting: $this.hasClass("ui-unselecting")
});
});
};
this.refresh();
this.selectees = selectees.addClass("ui-selectee");
this._mouseInit();
this.helper = $("<div class='ui-selectable-helper'></div>");
},
_destroy: function() {
this.selectees
.removeClass("ui-selectee")
.removeData("selectable-item");
this.element
.removeClass("ui-selectable ui-selectable-disabled");
this._mouseDestroy();
},
_mouseStart: function(event) {
var that = this,
options = this.options;
this.opos = [ event.pageX, event.pageY ];
if (this.options.disabled) {
return;
}
this.selectees = $(options.filter, this.element[0]);
this._trigger("start", event);
$(options.appendTo).append(this.helper);
// position helper (lasso)
this.helper.css({
"left": event.pageX,
"top": event.pageY,
"width": 0,
"height": 0
});
if (options.autoRefresh) {
this.refresh();
}
this.selectees.filter(".ui-selected").each(function() {
var selectee = $.data(this, "selectable-item");
selectee.startselected = true;
if (!event.metaKey && !event.ctrlKey) {
selectee.$element.removeClass("ui-selected");
selectee.selected = false;
selectee.$element.addClass("ui-unselecting");
selectee.unselecting = true;
// selectable UNSELECTING callback
that._trigger("unselecting", event, {
unselecting: selectee.element
});
}
});
$(event.target).parents().addBack().each(function() {
var doSelect,
selectee = $.data(this, "selectable-item");
if (selectee) {
doSelect = (!event.metaKey && !event.ctrlKey) || !selectee.$element.hasClass("ui-selected");
selectee.$element
.addClass(doSelect ? "ui-selecting" : "ui-unselecting");
selectee.unselecting = !doSelect;
selectee.selecting = doSelect;
selectee.selected = doSelect;
// selectable (UN)SELECTING callback
if (doSelect) {
that._trigger("selecting", event, {
selecting: selectee.element
});
} else {
that._trigger("unselecting", event, {
unselecting: selectee.element
});
}
return false;
}
});
},
_mouseDrag: function(event) {
this.dragged = true;
if (this.options.disabled) {
return;
}
var tmp,
that = this,
options = this.options,
x1 = this.opos[0],
y1 = this.opos[1],
x2 = event.pageX,
y2 = event.pageY;
if (x1 > x2) { tmp = x2; x2 = x1; x1 = tmp; }
if (y1 > y2) { tmp = y2; y2 = y1; y1 = tmp; }
this.helper.css({ left: x1, top: y1, width: x2 - x1, height: y2 - y1 });
this.selectees.each(function() {
var selectee = $.data(this, "selectable-item"),
hit = false;
//prevent helper from being selected if appendTo: selectable
if (!selectee || selectee.element === that.element[0]) {
return;
}
if (options.tolerance === "touch") {
hit = ( !(selectee.left > x2 || selectee.right < x1 || selectee.top > y2 || selectee.bottom < y1) );
} else if (options.tolerance === "fit") {
hit = (selectee.left > x1 && selectee.right < x2 && selectee.top > y1 && selectee.bottom < y2);
}
if (hit) {
// SELECT
if (selectee.selected) {
selectee.selected = false;
}
if (selectee.unselecting) {
selectee.$element.removeClass("ui-unselecting");
selectee.unselecting = false;
}
if (!selectee.selecting) {
selectee.$element.addClass("ui-selecting");
selectee.selecting = true;
// selectable SELECTING callback
that._trigger("selecting", event, {
selecting: selectee.element
});
}
} else {
// UNSELECT
if (selectee.selecting) {
if ((event.metaKey || event.ctrlKey) && selectee.startselected) {
selectee.$element.removeClass("ui-selecting");
selectee.selecting = false;
selectee.$element.addClass("ui-selected");
selectee.selected = true;
} else {
selectee.$element.removeClass("ui-selecting");
selectee.selecting = false;
if (selectee.startselected) {
selectee.$element.addClass("ui-unselecting");
selectee.unselecting = true;
}
// selectable UNSELECTING callback
that._trigger("unselecting", event, {
unselecting: selectee.element
});
}
}
if (selectee.selected) {
if (!event.metaKey && !event.ctrlKey && !selectee.startselected) {
selectee.selected = false;
selectee.$element.addClass("ui-unselecting");
selectee.unselecting = true;
// selectable UNSELECTING callback
that._trigger("unselecting", event, {
unselecting: selectee.element
});
}
}
}
});
return false;
},
_mouseStop: function(event) {
var that = this;
this.dragged = false;
$(".ui-unselecting", this.element[0]).each(function() {
var selectee = $.data(this, "selectable-item");
selectee.$element.removeClass("ui-unselecting");
selectee.unselecting = false;
selectee.startselected = false;
that._trigger("unselected", event, {
unselected: selectee.element
});
});
$(".ui-selecting", this.element[0]).each(function() {
var selectee = $.data(this, "selectable-item");
selectee.$element.removeClass("ui-selecting").addClass("ui-selected");
selectee.selecting = false;
selectee.selected = true;
selectee.startselected = true;
that._trigger("selected", event, {
selected: selectee.element
});
});
this._trigger("stop", event);
this.helper.remove();
return false;
}
});.nu-context-menu {
background-clip: padding-box;
background-color: #fff;
border: 1px solid rgba(0,0,0,0.10);
border-radius: 5px;
box-shadow: 0 2px 2px rgba(0,0,0,0.15);
box-sizing: border-box;
display: block;
height: 0;
opacity: 0;
overflow: hidden;
position: absolute;
width: 0;
z-index: 9999;
}
.nu-context-menu.active {
opacity: 1;
height: auto;
width: auto;
}
.nu-context-menu ul {
font-size: 15px;
list-style: none;
margin: 2px 0 0;
padding: 4px 0;
text-align: left;
}
.nu-context-menu ul li a, .nu-context-menu ul li {
clear: both;
color: #777;
cursor: pointer;
font-weight: 400;
line-height: 1.42857;
padding: 5px 0px 5px 5px;
white-space: nowrap;
width: 108px;
text-align: left;
text-decoration: none;
}
.nu-context-menu ul li:hover {
background: #f2f2f2;
color: #333;
}
.nu-context-menu ul hr {
background: #e8e8e8;
border: 0;
color: #e8e8e8;
height: 1px;
margin: 4px 0;
}<head>
<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
</head>
<body>
<div class="content block">
<div id="results">
<table>
<tbody>
<tr>
<th>Number:</th>
<th>Name:</th>
<th>Size:</th>
</tr>
</tbody>
<tbody class="toBeSelected">
<tr class="tabledata">
<td>2</td>
<td class="filename">100KILA - 100 gaidi.mp3</td>
<td>7.93 MB</td>
</tr>
<tr class="tabledata">
<td>1</td>
<td class="filename">3.pdf</td>
<td>385.52 KB</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="dialog-moveto">
<div class="moveto">
<select name="folders" id="folders">
<i class="fa fa-folder-open"></i>
<option>{{ $folder->folder }}</option>
</select>
</div>
</div>
</body>
这是我的项目的一部分byut我不知道为什么我不能使HTML可选择