特殊选择jquery Selectable

Posted 2023-05-07

【中文标题】特殊选择jquery Selectable

【英文标题】：Special selection jquery Selectable

【发布时间】：2017-09-03 09:52:51

【问题描述】：

我有一个日历网格（用于月份）。我想为事件选择时间段。和图片一样： 图片1。

---

图 2。

如何实现这样的选择（当用户用鼠标向下拖动单元格（图片上的 8、15、22）时，他选择了与单元格相交的所有周（图 2）） . 看来，JQuery UI 可选插件无助于做出这样的选择（它只会选择 3 个单元格（8、15、22））。也许它可以或者有其他库可以帮助做到这一点。也许它可以用普通的 js 来修复...请给点建议。

【问题讨论】：

你能把你当前的代码分享给jsfiddle.net，这样我们就可以从那开始......我想我可以帮助你

您可以使用selecting 和unselecting 事件在用户拖动单元格api.jqueryui.com/selectable/#event-selecting时重绘用户界面@

【参考方案1】：

我做了一个你可以点击和拖动的地方。基本上每个都有一个唯一的 id，然后我们突出显示开始和结束之间的所有左侧浮动元素。

mouseDown = null;
from = null;
$("div").each(function (i) 
  $(this).attr("data-id",i);
);
$("div").on("mousedown", function () 
  mouseDown = $(this).attr("data-id");
).on("mousemove", function () 
  if (mouseDown) 
    mouseUp = $(this).attr("data-id");
    $("div").each(function (i) 
      if (i >= mouseDown && i <= mouseUp) 
        $(this).css("background","red");
      
    );
  
).on("mouseup", function ()
  mouseDown = null;
);

div 
  width:50px;
  height:50px;
  float:left;
  border:1px solid black;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>