Question

我正在尝试模拟找到here

的拖拽行为

如何使用矩形轮廓更改以下代码以使鼠标悬效？也可以像上面的例子那样对它进行排序吗？

<!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>

Answer 1

你发布的链接有一个没有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一样，drag事件监听器应该使用jQuery，你可以使用.bind（）;以与鼠标事件完全相同的方式将它们绑定到某种动作，虽然我从未测试过这个，因为我总是在没有jQuery的情况下这样做。

Answer 2

我会有2节课。一个是div看起来如何正常，另一个是当它被拖过它时它应该看起来的样子（over，out）。然后对于事件处理程序，我会切换类。

以下是一些示例代码，可以将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');

                  }
            });

jquery拖放鼠标悬停效果？

2 个答案: