- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
有没有办法检测是否有东西被拖过元素?或者触发悬停事件?找到了一些有关通过 onMove 向拖过的元素添加类的信息,但它似乎对我不起作用。
最佳答案
我用解决方案制作了一个 JSBin:https://jsbin.com/xuwocis/edit?html,js,output
var sorting = false;
new Sortable(el, {
onStart: function() {
sorting = true;
},
onEnd: function() {
sorting = false;
// remove styling
targetElement.style.backgroundColor = '';
},
// forceFallback:true
});
// For native drag&drop
targetElement.addEventListener('dragover', function(evt) {
evt.preventDefault();
});
targetElement.addEventListener('dragenter', function(evt) {
if (sorting && !targetElement.contains(evt.relatedTarget)) {
// Here is where you add the styling of targetElement
targetElement.style.backgroundColor = 'red';
}
});
targetElement.addEventListener('dragleave', function(evt) {
if (sorting && !targetElement.contains(evt.relatedTarget)) {
// Here is where you remove the styling of targetElement
targetElement.style.backgroundColor = '';
}
});
// For fallback
targetElement.addEventListener('mouseenter', function(evt) {
if (sorting) {
// Here is where you change the styling of targetElement
targetElement.style.backgroundColor = 'red';
}
});
targetElement.addEventListener('mouseleave', function(evt) {
if (sorting) {
// Here is where you remove the styling of targetElement
targetElement.style.backgroundColor = '';
}
});
el.addEventListener('touchmove', function(evt) {
if (!sorting) { return; }
var x = evt.touches[0].clientX;
var y = evt.touches[0].clientY;
var elementAtTouchPoint = document.elementFromPoint(x, y);
if (elementAtTouchPoint === targetElement ||
// In case of a ghost element, the element at touch point
// is the ghost element and thus we need to check if the parent
// of the ghost element is the targetElement.
elementAtTouchPoint.parentNode === targetElement) {
targetElement.style.backgroundColor = 'red';
} else {
// Here is where you remove the styling of targetElement
targetElement.style.backgroundColor = '';
}
});
基本上,如果使用 SortableJS 进行排序,您会为回退执行 mouseenter 和 mouseleave 事件,并为本地拖放执行 dragenter 和 dragleave 事件(忽略气泡)。如果您没有 forceFallback: true
,您将需要两者。
关于javascript - Vue.Draggable (sortable.js) 中的 ondragover 等价物,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54917268/
这是一段简单的代码,当目标 div 悬停在其上方时,只需更改其边框颜色和背景颜色即可。颜色应该根据拖动的内容而变化,这应该由 ondragstart 决定。然而什么也没有发生,事实上我的光标是不允许的
我正在尝试掌握 html5 拖放事件的窍门。 function rowDragStart(event) { let targetRowId = event.target.attributes.
使用 ondragover="functioname(event)、ondragstart="functioname(event) 和 ondrop="functioname(event) HTML
我对 wxPython 中的拖放有点困惑(但也许这个问题也与其他 GUI 框架中的拖放有关)。这些框架提供了几个回调(OnEnter 和 OnDragOver),据称它们允许我通知系统当前鼠标位置是否
我正在尝试在我的组件中创建简单的拖放方法,但似乎无法正常工作。这真的是我第一次处理拖放类型的东西,所以不确定我是否采取了正确的方法。刚刚采用了 W3 的教程。有什么建议? id 将是简单地获取被拖动元
我遵循了使用 javascript 制作文件 uploader 的教程,并且我让它工作了,所以我认为它作为 jQuery 插件会更好,这样我就可以在页面上的不同元素上使用它。所以我开始将代码移植到我的
为什么下面的示例中没有发生 onDragOver 事件? 如何实现最简单的拖动行为,即没有剪贴板的东西? import javafx.application.Application; import j
我使用 HTML5 onDrop 和 onDragOver 将图像从一个 div 标签移动到另一个。 拖/放脚本: function allowDrop(ev) { ev.preventDefaul
我的任务是使用 angular 处理掉落的文本。我在拖放事件中不断收到此错误 $scope is not defined 。知道如何解决这个问题吗? 我已经研究过 Angular 拖放库。他们不允许拖
请在这里查看我的jsfiddle:http://jsfiddle.net/fletchadam/mr5Uj/15/ 当您从顶部拖动项目时,我希望您将鼠标悬停在其上的单个可放置区域更改颜色。 我相信技巧
如何将 iframe 上发生的 ondragover 事件传播回包含 iframe 的父 div?我已将 ondragover 和 ondrop 事件处理程序关联到父 div。当将某些内容拖到 div
我这里有一个简单的例子,它对我来说在 Chrome 11 中没有触发 http://jsfiddle.net/G9mJw/它包含一个非常简单的代码: var dropzone = document.g
我正在用 JavaScript 创建一个简单的图片拼图游戏,并尝试实现 HTML5 拖放 API。如果我向元素添加 ondragstart、ondragover 或 ondrop 事件(即作为属性),
有没有办法检测是否有东西被拖过元素?或者触发悬停事件?找到了一些有关通过 onMove 向拖过的元素添加类的信息,但它似乎对我不起作用。 最佳答案 我用解决方案制作了一个 JSBin:https://
我尝试用 Angular 实现 html5 拖放。 代码是: 在 Controller 中: $scope.drop = function(e) { console.log('a drop') };
我是一名优秀的程序员,十分优秀!