opeing一個對話框時使用jQuery

Question

我使用jQuery UI爲我的項目，特別是selectables和dialogs刪除類。當我有選定的HTML項目並打開一個對話框時，所選項目將被取消（取消）選擇。我搜索了爲什麼它（德）選擇它，但沒有結果。有人知道如何防止這種情況嗎？

Answer 1

看着你的代碼後，我發現了一些欠缺，主要涉及具有我的暱稱岡井註釋行，所以往裏該字符串。

因爲我不懂你的語言，我很抱歉，我的英語改變了標籤的舉動，我測試了在上下文菜單中的移動功能，現在它的工作原理。 我搬到你在第一個地方菜單中的移動功能，因此您可以直接在「運行片段」看到沒有全模式下打開它。

如果您需要添加的要素取消錶行可能會做這樣的事情在表外，當點擊：

$('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>

Answer 2

$(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' 
 
     }, \t 
 
     { 
 
      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: { 
 
\t appendTo: "body", 
 
\t autoRefresh: true, 
 
\t distance: 0, 
 
\t filter: "*", 
 
\t tolerance: "touch", 
 

 
\t // callbacks 
 
\t selected: null, 
 
\t selecting: null, 
 
\t start: null, 
 
\t stop: null, 
 
\t unselected: null, 
 
\t unselecting: null 
 
}, 
 
_create: function() { 
 
\t var selectees, 
 
\t \t that = this; 
 

 
\t this.element.addClass("ui-selectable"); 
 

 
\t this.dragged = false; 
 

 
\t // cache selectee children based on filter 
 
\t this.refresh = function() { 
 
\t \t selectees = $(that.options.filter, that.element[0]); 
 
\t \t selectees.addClass("ui-selectee"); 
 
\t \t selectees.each(function() { 
 
\t \t \t var $this = $(this), 
 
\t \t \t \t pos = $this.offset(); 
 
\t \t \t $.data(this, "selectable-item", { 
 
\t \t \t \t element: this, 
 
\t \t \t \t $element: $this, 
 
\t \t \t \t left: pos.left, 
 
\t \t \t \t top: pos.top, 
 
\t \t \t \t right: pos.left + $this.outerWidth(), 
 
\t \t \t \t bottom: pos.top + $this.outerHeight(), 
 
\t \t \t \t startselected: false, 
 
\t \t \t \t selected: $this.hasClass("ui-selected"), 
 
\t \t \t \t selecting: $this.hasClass("ui-selecting"), 
 
\t \t \t \t unselecting: $this.hasClass("ui-unselecting") 
 
\t \t \t }); 
 
\t \t }); 
 
\t }; 
 
\t this.refresh(); 
 

 
\t this.selectees = selectees.addClass("ui-selectee"); 
 

 
\t this._mouseInit(); 
 

 
\t this.helper = $("<div class='ui-selectable-helper'></div>"); 
 
}, 
 

 
_destroy: function() { 
 
\t this.selectees 
 
\t \t .removeClass("ui-selectee") 
 
\t \t .removeData("selectable-item"); 
 
\t this.element 
 
\t \t .removeClass("ui-selectable ui-selectable-disabled"); 
 
\t this._mouseDestroy(); 
 
}, 
 

 
_mouseStart: function(event) { 
 
\t var that = this, 
 
\t \t options = this.options; 
 

 
\t this.opos = [ event.pageX, event.pageY ]; 
 

 
\t if (this.options.disabled) { 
 
\t \t return; 
 
\t } 
 

 
\t this.selectees = $(options.filter, this.element[0]); 
 

 
\t this._trigger("start", event); 
 

 
\t $(options.appendTo).append(this.helper); 
 
\t // position helper (lasso) 
 
\t this.helper.css({ 
 
\t \t "left": event.pageX, 
 
\t \t "top": event.pageY, 
 
\t \t "width": 0, 
 
\t \t "height": 0 
 
\t }); 
 

 
\t if (options.autoRefresh) { 
 
\t \t this.refresh(); 
 
\t } 
 

 
\t this.selectees.filter(".ui-selected").each(function() { 
 
\t \t var selectee = $.data(this, "selectable-item"); 
 
\t \t selectee.startselected = true; 
 
\t \t if (!event.metaKey && !event.ctrlKey) { 
 
\t \t \t selectee.$element.removeClass("ui-selected"); 
 
\t \t \t selectee.selected = false; 
 
\t \t \t selectee.$element.addClass("ui-unselecting"); 
 
\t \t \t selectee.unselecting = true; 
 
\t \t \t // selectable UNSELECTING callback 
 
\t \t \t that._trigger("unselecting", event, { 
 
\t \t \t \t unselecting: selectee.element 
 
\t \t \t }); 
 
\t \t } 
 
\t }); 
 

 
\t $(event.target).parents().addBack().each(function() { 
 
\t \t var doSelect, 
 
\t \t \t selectee = $.data(this, "selectable-item"); 
 
\t \t if (selectee) { 
 
\t \t \t doSelect = (!event.metaKey && !event.ctrlKey) || !selectee.$element.hasClass("ui-selected"); 
 
\t \t \t selectee.$element 
 
\t \t \t \t 
 
\t \t \t \t .addClass(doSelect ? "ui-selecting" : "ui-unselecting"); 
 
\t \t \t selectee.unselecting = !doSelect; 
 
\t \t \t selectee.selecting = doSelect; 
 
\t \t \t selectee.selected = doSelect; 
 
\t \t \t // selectable (UN)SELECTING callback 
 
\t \t \t if (doSelect) { 
 
\t \t \t \t that._trigger("selecting", event, { 
 
\t \t \t \t \t selecting: selectee.element 
 
\t \t \t \t }); 
 
\t \t \t } else { 
 
\t \t \t \t that._trigger("unselecting", event, { 
 
\t \t \t \t \t unselecting: selectee.element 
 
\t \t \t \t }); 
 
\t \t \t } 
 
\t \t \t return false; 
 
\t \t } 
 
\t }); 
 

 
}, 
 

 
_mouseDrag: function(event) { 
 

 
\t this.dragged = true; 
 

 
\t if (this.options.disabled) { 
 
\t \t return; 
 
\t } 
 

 
\t var tmp, 
 
\t \t that = this, 
 
\t \t options = this.options, 
 
\t \t x1 = this.opos[0], 
 
\t \t y1 = this.opos[1], 
 
\t \t x2 = event.pageX, 
 
\t \t y2 = event.pageY; 
 

 
\t if (x1 > x2) { tmp = x2; x2 = x1; x1 = tmp; } 
 
\t if (y1 > y2) { tmp = y2; y2 = y1; y1 = tmp; } 
 
\t this.helper.css({ left: x1, top: y1, width: x2 - x1, height: y2 - y1 }); 
 

 
\t this.selectees.each(function() { 
 
\t \t var selectee = $.data(this, "selectable-item"), 
 
\t \t \t hit = false; 
 

 
\t \t //prevent helper from being selected if appendTo: selectable 
 
\t \t if (!selectee || selectee.element === that.element[0]) { 
 
\t \t \t return; 
 
\t \t } 
 

 
\t \t if (options.tolerance === "touch") { 
 
\t \t \t hit = (!(selectee.left > x2 || selectee.right < x1 || selectee.top > y2 || selectee.bottom < y1)); 
 
\t \t } else if (options.tolerance === "fit") { 
 
\t \t \t hit = (selectee.left > x1 && selectee.right < x2 && selectee.top > y1 && selectee.bottom < y2); 
 
\t \t } 
 

 
\t \t if (hit) { 
 
\t \t \t // SELECT 
 
\t \t \t if (selectee.selected) { 
 
\t \t \t \t 
 
\t \t \t \t selectee.selected = false; 
 
\t \t \t } 
 
\t \t \t if (selectee.unselecting) { 
 
\t \t \t \t selectee.$element.removeClass("ui-unselecting"); 
 
\t \t \t \t selectee.unselecting = false; 
 
\t \t \t } 
 
\t \t \t if (!selectee.selecting) { 
 
\t \t \t \t selectee.$element.addClass("ui-selecting"); 
 
\t \t \t \t selectee.selecting = true; 
 
\t \t \t \t // selectable SELECTING callback 
 
\t \t \t \t that._trigger("selecting", event, { 
 
\t \t \t \t \t selecting: selectee.element 
 
\t \t \t \t }); 
 
\t \t \t } 
 
\t \t } else { 
 
\t \t \t // UNSELECT 
 
\t \t \t if (selectee.selecting) { 
 
\t \t \t \t if ((event.metaKey || event.ctrlKey) && selectee.startselected) { 
 
\t \t \t \t \t selectee.$element.removeClass("ui-selecting"); 
 
\t \t \t \t \t selectee.selecting = false; 
 
\t \t \t \t \t selectee.$element.addClass("ui-selected"); 
 
\t \t \t \t \t selectee.selected = true; 
 
\t \t \t \t } else { 
 
\t \t \t \t \t selectee.$element.removeClass("ui-selecting"); 
 
\t \t \t \t \t selectee.selecting = false; 
 
\t \t \t \t \t if (selectee.startselected) { 
 
\t \t \t \t \t \t selectee.$element.addClass("ui-unselecting"); 
 
\t \t \t \t \t \t selectee.unselecting = true; 
 
\t \t \t \t \t } 
 
\t \t \t \t \t // selectable UNSELECTING callback 
 
\t \t \t \t \t that._trigger("unselecting", event, { 
 
\t \t \t \t \t \t unselecting: selectee.element 
 
\t \t \t \t \t }); 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t \t if (selectee.selected) { 
 
\t \t \t \t if (!event.metaKey && !event.ctrlKey && !selectee.startselected) { 
 
\t \t \t \t \t 
 
\t \t \t \t \t selectee.selected = false; 
 

 
\t \t \t \t \t selectee.$element.addClass("ui-unselecting"); 
 
\t \t \t \t \t selectee.unselecting = true; 
 
\t \t \t \t \t // selectable UNSELECTING callback 
 
\t \t \t \t \t that._trigger("unselecting", event, { 
 
\t \t \t \t \t \t unselecting: selectee.element 
 
\t \t \t \t \t }); 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t } 
 
\t }); 
 

 
\t return false; 
 
}, 
 

 
_mouseStop: function(event) { 
 
\t var that = this; 
 

 
\t this.dragged = false; 
 

 
\t $(".ui-unselecting", this.element[0]).each(function() { 
 
\t \t var selectee = $.data(this, "selectable-item"); 
 
\t \t selectee.$element.removeClass("ui-unselecting"); 
 
\t \t selectee.unselecting = false; 
 
\t \t selectee.startselected = false; 
 
\t \t that._trigger("unselected", event, { 
 
\t \t \t unselected: selectee.element 
 
\t \t }); 
 
\t }); 
 
\t $(".ui-selecting", this.element[0]).each(function() { 
 
\t \t var selectee = $.data(this, "selectable-item"); 
 
\t \t selectee.$element.removeClass("ui-selecting").addClass("ui-selected"); 
 
\t \t selectee.selecting = false; 
 
\t \t selectee.selected = true; 
 
\t \t selectee.startselected = true; 
 
\t \t that._trigger("selected", event, { 
 
\t \t \t selected: selectee.element 
 
\t \t }); 
 
\t }); 
 
\t this._trigger("stop", event); 
 

 
\t this.helper.remove(); 
 

 
\t 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可選擇