Question

我遇到了JQuery UI问题。从我的片段中可以看出，我可以将元素拖到Fields上。当我将鼠标悬停在该字段上时，相应的字段将以绿色突出显示。

现在我添加了使用可选拖动滚动的功能。当悬停在底部或顶部时，我可以向上和向下滚动。

问题是，滚动后突出显示无效。当鼠标悬停在字段上时，会突出显示错误的字段，尽管它们不再位于该位置。

我可以在这做什么？

$(document).ready(function() {
  //alert($('.dragItem').text());
  $('.dragItem').draggable({
    cursor: "-webkit-grabbing",
    helper: 'clone',
    revertDuration: 500,
    revert: true,
    appendTo: 'body',
    opacity: 1.0,
    start: function(event, ui) {},
    stop: function(event, ui) {}
  });

  var left = $('#dropArea');
  var height = left.height() * 2.5;
  $('.upper').droppable({
    over: function(event, ui) {
      left.animate({
        scrollTop: 0
      }, 900, 'linear');
    },
    out: function(event, ui) {
      left.stop();
    }
  });

  $('.lower').droppable({
    over: function(event, ui) {
      value = height;
      left.animate({
        scrollTop: value
      }, 900, 'linear');
      /*$('#tbLeftInner').autoscroll({
      	direction: 'down',
      	step: 150,
      	scroll: true
      });*/
    },
    out: function(event, ui) {
      left.stop();
    }
  });

  $('.dropField').droppable({
    scroll: true,
    accept: '.dragItem',
    drop: function(ev, ui) {
      $(this).removeClass('tbDrop');
      $(this).effect("highlight", {
        color: '#97d700'
      }, 1000);
      $(ui.helper).remove();
      $(ui.draggable).remove();
    },
    over: function(ev, ui) {
      $(this).addClass('tbDrop');
      //$(this).css('background-color', '#97d700 !important');
    },
    out: function(ev, ui) {
      $(this).removeClass('tbDrop');
      //$(this).css('background-color', 'none');
    }
  });
});

#main {
  width: 200px;
  overflow: scroll;
  float:left;
  margin-left: 50px;
}
#dragArea {
  width: 200px;
  margin-bottom: 20px;
  float: left;
}
.dragItem {
  background-color: blue;
  color: white;
  border: green 1px solid;
}
#dropArea {
  width: 200px;
  height: 200px;
  overflow: scroll;
  position: absolute;
}
.dropField {
  background-color: white;
  height: 40px;
  border: green 1px solid;
}
.upper,
.lower {
  position: absolute;
  height: 20px;
  width: 200px;
  background: rgba(50, 50, 50, .2);
  z-index: 10;
}
.lower {
  margin-top: 180px;
}
.tbDrop {
  background-color: #97d700 !important;
}

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="dragArea">
  <div class="dragItem">Drag 1</div>
  <div class="dragItem">Drag 2</div>
  <div class="dragItem">Drag 3</div>
</div>

<div id="main">
  <div class="upper"></div>
  <div class="lower"></div>
  <div id="dropArea">
    <div class="dropField">Field 1</div>
    <div class="dropField">Field 2</div>
    <div class="dropField">Field 3</div>
    <div class="dropField">Field 4</div>
    <div class="dropField">Field 5</div>
    <div class="dropField">Field 6</div>
    <div class="dropField">Field 7</div>
    <div class="dropField">Field 8</div>
  </div>

</div>

Answer 1

我在这里找到了解决方案。 JqueryUI, drag elements into cells of a scrolling dropable div containing large table

在我的设置中，我将不得不更改拖动。

$('.dragItem').draggable({
    cursor: "-webkit-grabbing",
    revertDuration: 500,
    revert: true,
    appendTo: 'body',
    opacity: 1.0,
        helper: function(event) {
            var innerHtml = $('.dragitem').html();
            $('#dragArea').append('<div id="clone">'+ innerHtml +'</div>');
            var clone = $("#clone");
            clone.hide();
            setTimeout(function(){
                clone.appendTo('body'); 
                clone.show();
            },1);
            return clone;
        },
    start: function(event, ui) {},
    stop: function(event, ui) {}
});

Droppable容器在JQuery UI中无法正确滚动

1 个答案: