jquery拖放鼠标悬停效果？

发布于 2024-12-11 17:02:28 字数 2886 浏览 0 评论 0原文

我正在尝试模拟发现的拖放行为此处

如何更改以下代码以获得带有矩形轮廓的鼠标悬停效果？是否可以像上面的例子一样对其进行排序？

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

原文

I'm trying to emulate the behavior of this drag n drop found here

How do I change the following code to get the mouse over effect with the rectangle outline? Also is it possible to have it sortable like the example above?

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

天邊彩虹 2024-12-18 17:02:28

您发布的链接有一个在没有 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 的情况下这样做。

The link you posted has an example created without jQuery, and I have done the same several times myself with a slightly different approach.

I'm sure there is an easier way in jQuery UI draggable, and the documentation would be the first place to look.

However, to show how it's done in regular javacript without a library, wich should probably work with jQuery as well, as it uses regular event listeners, you would do something like this:

var dropzone;  
    dropzone = document.getElementById("dropzone");  
    dropzone.addEventListener("dragenter", dragin, false);
    dropzone.addEventListener("dragleave", dragout, false);
    dropzone.addEventListener("drop", drop, false);

This binds the events to functions, that would look something like this:

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
}

This is the way it's normally done, and just as mouseenter and mouseleave, the drag event listeners should work with jQuery, and you could probably use .bind(); to bind them to some sort of action in exactly the same way as the mouse events, allthough I have never tested this as I always do this without jQuery.

回复收藏 0 原文

清旖 2024-12-18 17:02:28

我会上两堂课。一个是 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');

                  }
            });

I would have 2 classes. One with how the div looks normally, then another with how it should look when something is dragged over it (over, out). Then for the event handlers, I would toggle the classes.

Here is some sample code that will change the color of a div from silver to red as something is dragged over it:

<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');

                  }
            });

回复收藏 0 原文

~没有更多了~