jQuery的拖动n拖放鼠标效果？
[英]jquery drag n drop mouse over effect?
问题描述
我正在尝试模仿在这里找到的这个拖放的行为
如何更改以下代码以使鼠标悬停在矩形轮廓上？ 也可以像上面的示例一样对它进行排序吗？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
.demo { width: 320px }
ul { width: 200px; height: 150px; padding: 2em; margin: 10px; color: black; list-style: none; }
ul li { border: solid 1px red; cursor: move; }
#draggable { border: solid 1px #ccc;}
#droppable { border: solid 1px #ddd; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
var selectedClass = 'ui-state-highlight',
clickDelay = 600,
// click time (milliseconds)
lastClick, diffClick; // timestamps
$("#draggable li")
// Script to deferentiate a click from a mousedown for drag event
.bind('mousedown mouseup', function(e) {
if (e.type == "mousedown") {
lastClick = e.timeStamp; // get mousedown time
} else {
diffClick = e.timeStamp - lastClick;
if (diffClick < clickDelay) {
// add selected class to group draggable objects
$(this).toggleClass(selectedClass);
}
}
})
.draggable({
revertDuration: 10,
// grouped items animate separately, so leave this number low
containment: '.demo',
start: function(e, ui) {
ui.helper.addClass(selectedClass);
},
stop: function(e, ui) {
// reset group positions
$('.' + selectedClass).css({
top: 0,
left: 0
});
},
drag: function(e, ui) {
// set selected group position to main dragged object
// this works because the position is relative to the starting position
$('.' + selectedClass).css({
top: ui.position.top,
left: ui.position.left
});
}
});
$("#droppable, #draggable").droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function(e, ui) {
$('.' + selectedClass).appendTo($(this)).add(ui.draggable)
.removeClass(selectedClass).css({
top: 0,
left: 0
});
}
});
});
</script>
</head>
<body>
<div class="demo">
<p>Available items</p>
<ul id="draggable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<p>Drop Zone</p>
<ul id="droppable">
</ul>
</div>
</body>
</html>
2 个解决方案
解决方案1
2 已采纳 2011-10-25 15:03:41
您发布的链接有一个不使用jQuery创建的示例，而我本人用略有不同的方法做了几次相同的操作。
我确信jQuery UI可以拖动的方式更简单，而文档将是查找的第一位。
但是，为了显示它是如何在不带库的常规javacript中完成的，该方法也应该与jQuery一起使用，因为它使用了常规事件侦听器，您可以执行以下操作：
var dropzone;
dropzone = document.getElementById("dropzone");
dropzone.addEventListener("dragenter", dragin, false);
dropzone.addEventListener("dragleave", dragout, false);
dropzone.addEventListener("drop", drop, false);
这会将事件绑定到函数，如下所示：
function drop(e) {
//do something when dropped
e.stopprop, preventdefault etc.
}
function dragin(e) {
//do something when dragged in
e.stop stuff
}
function dragout(e) {
//do something when dragged out, usually remove the stuff you did above
e.stop stuff
}
这就是通常的方式，就像mouseenter和mouseleave一样，拖动事件侦听器应该与jQuery一起使用，并且您可能可以使用.bind（）;。 以与鼠标事件完全相同的方式将它们绑定到某种动作，尽管我从未进行过测试，因为在没有jQuery的情况下我总是这样做。
解决方案2
1 2011-10-25 15:04:20
我将上两节课。 一个与div的正常外观有关，另一个与当某物在其上拖动（上，下）时的外观有关。 然后对于事件处理程序，我将切换类。
这是一些示例代码，当将某些div拖动到上面时，它将div的颜色从银色变为红色：
<style>
.selectedCategory {
width: 200px;
height: 35px;
background: silver;
}
.selectedCategoryActive {
width: 200px;
height: 35px;
background: red;
}
</style>
<div id="element" class="selectedCategory"></div>
$('#element').droppable({
over: function(event, ui) {
$(this).toggleClass('selectedCategoryActive');
},
out: function(event, ui) {
$(this).toggleClass('selectedCategoryActive');
}
});
如何用鼠标拖动n滴？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.