Question

我正在尝试开发可自定义的计划Web应用程序。

我所追求的实质上是您单击并拖动以突出显示文本时获得的常规突出显示行为，但我希望这对表数据元素有效。就像在Excel中一样，如果单击并拖动以突出显示单元格，然后反转鼠标方向，它将取消突出显示您已经回溯的单元格＆＃34;过度。

是否可以使用jQuery执行此操作？

到目前为止，我可以突出显示＆＃39;细胞，但我无法弄清楚如何控制不突出显示而不会突出显示鼠标离开的所有内容。我已经研究了很长一段时间的解决方案而没有成功。

这是我到目前为止的代码：

HTML：

table {
  font-family: Arvo, Arial, sans-serif;
  border-collapse: separate !important;
  border-top: 2px solid #4DC7E8;
  border-left: 2px solid #4DC7E8;
  border-radius: 6px;
}

.days-of-the-week th {
  width: 160px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  border-right: 2px solid #4DC7E8;
  border-bottom: 2px solid #4DC7E8;
  border-radius: 6px;
}

tr td, th {
  border-right: 2px solid #4DC7E8;
  border-bottom: 2px solid #4DC7E8;
  border-radius: 6px;
}

td {
  height: 50px;
}

.days-of-the-week .time-col {
  width: 80px;
}

tbody th {
  text-align: right;
  padding: 5px 3px;
}

.highlight {
  background-color: rgba(255, 108, 78, 0.3); 
}

.appt-text {
   background-color: inherit;
   border: 0px;
   width: 100%;
   height: 100%;
   outline: none;
   cursor: default;
}

CSS：

function addAppt() {
$('td').css('cursor', 'cell');
$('textarea').css('cursor', 'cell');
var spanCount = 1; 
$('td').mousedown(function(){
      $('td').hover(function(){
        $(this).addClass('highlight');
      });
    });
    $('td').mouseup(function(){
      $('td').off('mouseenter mouseleave');
    });
}

function delAppt() {
    $('td').css('cursor', 'not-allowed');
    $('textarea').css('cursor', 'not-allowed');
    $('td').click(function(){
      $(this).removeClass('highlight');
    });
    $('td').mousedown(function(){
      $('td').hover(function(){
        $(this).removeClass('highlight');
      });
    });
    $('td').mouseup(function(){
      $('td').off('mouseenter mouseleave');
    });
}

使用Javascript：

var name = "Jhon";
exports.getName = function() {
  return name;
}

编辑：我添加了一个jsfiddle，看看是否可以获得更多关注。

https://jsfiddle.net/Adam_M/fypw7jka/

我在大约2个月前学会了如何编码，所以如果这段代码看起来效率低劣，我会道歉。如果提供解释，我愿意接受其他建议/技巧！

当鼠标改变方向时删除突出显示

0 个答案: