Question

我有关于jquery selectable的问题，我有包含用户信息的div，这是我的div

<div class="user-container" id="append_users">
     <div class="fc-event draggable-user" ondblclick="sys.callUserProfile('+user.id+')" id="user_'+user.id+'"style="z-index: 9999;"  onmousedown="sys.mouseDown()" onmouseup="sys.mouseLeave()">
            <div class="container-fluid">
                <input type="hidden" value="'+user.id+'" id="user_'+ user.id + '_value" class="userId">
             <div class="row">
             <div class="col-xs-3 avatar-col">
               <img src="'+getUserImage(user.avatar)+'"width="100%">
             </div>
             <div class="col-xs-9 data-col">
               <p class="fullName dataText" >'+user.fullName+'</p>
                <p class="usr_Gender dataText" >Male</p>
                 <div style="position: relative"><li class="availableUnavailable"></li><li class="usr_profesion dataText" >AVAILABLE</li></div>
                  <p class="user_id" style="float:right;margin:3px">'+user.employee_id+'</p>
                 </div>
             </div>
           </div>
        </div>
</div>

我需要整个fc-event div作为一个，所以id =“append_users”的div应该包含可选类，而类fc-event的div应该被认为是选择，我试过这个< / p>

( "#append_users" ).selectable();

但是所有的孩子都参加了ui-selectee课程并且它根本不起作用，所以我想要做的就是将fc-event作为一个div应该被认为是一个，我希望我很清楚，任何人请帮忙

Answer 1

文档并没有明确说明，但是从jQueryUI网站上的演示代码和描述（http://jqueryui.com/selectable/）可以看出，你执行的元素是＆＃34 ;可选择＆＃34;对于您想要选择的内容，命令将针对容器。它会自动将该元素的所有子元素转换为可选择的元素。这是合乎逻辑的，因为通常您希望列表中有多个可选项，并且可以选择一个或多个项目进行选择。

所以，如果你想要你的＆＃34; append_users＆＃34;要选择的元素，你必须使该元素的父元素成为你可以选择的元素的目标。命令。你还没有表明父母是什么，所以为了举例，我假设它只是另一个<div>：

<强> HTML：

<div id="selectable">
  <div class="user-container" id="append_users">
    <div class="fc-event draggable-user"  id="user_1" style="z-index: 9999;">
        <div class="container-fluid">
            <input type="hidden" value="1" id="user_1_value" class="userId">
         <div class="row">
         <div class="col-xs-3 avatar-col">

           <img src="https://i.imgur.com/db4KgSp.png" width="100px">
         </div>
         <div class="col-xs-9 data-col">
           <p class="fullName dataText" >user.fullName</p>
            <p class="usr_Gender dataText" >Male</p>
             <div style="position: relative"><li class="availableUnavailable"></li><li class="usr_profesion dataText" >AVAILABLE</li></div>
              <p class="user_id" style="float:right;margin:3px">user.employee_id</p>
             </div>
         </div>
       </div>
    </div>
  </div>
</div>

<强> JavaScript的：

$("#selectable").selectable();

请参阅http://jsfiddle.net/s6Lmy70b/2/进行工作演示。

（N.B。与您的相比，这是使用非常轻微调整的标记，仅用于演示并使其更容易使其工作，但无论显示的确切内容如何，原则都相同）

Jquery-ui可选择的问题

1 个答案: