如何在JQuery UI Draggable元素的start事件处理程序中使css位置更改生效？

时间：2022-12-06 13:29:14

I have an odd situation in which I need to modify the position of a draggable element as soon as the user starts dragging it. So, during the draggable element's start event handler, I'm trying to set the position. It doesn't respond to the position change unless - and this is weird - I do something to cause a javascript error after I change the position. Here's an example:

我有一个奇怪的情况,我需要在用户开始拖动它时立即修改可拖动元素的位置。因此,在draggable元素的启动事件处理程序期间,我正在尝试设置位置。它没有响应位置变化,除非 - 这很奇怪 - 我做了一些事情,在我改变位置后导致javascript错误。这是一个例子:


<html>
<head>
<title>Drag reposition test</title>

<script type="text/javascript" src="js/css_browser_selector.js"></script> 
<script type="text/javascript" src="development-bundle/jquery-1.3.2.js"></script> 
<script type="text/javascript" src="development-bundle/ui/jquery-ui-1.7.1.custom.js"></script> <!-- Includes JQuery UI Draggable. -->

<style type="text/css">
    #draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>

<script type="text/javascript">

$(function() {
    $("#initialdragger").draggable({    
        start: function(e, ui) {
            $('#initialdragger').css('top', 400);
            x = y; // Javascript error, which weirdly causes a redraw.
        }
    });     
});
</script>

</head>

<body>

<div id="initialdragger" class="ui-widget-content" style="border-width: 1px; border-color: black; background-color: orange; width: 300px">
    <p>Drag me around</p>       
</div>

</body>
</html>

How can I legitimately cause a redraw to happen in this context? JQuery's hide() and show() don't work and neither do these methods.

在这种情况下,我怎样才能合法地重绘? JQuery的hide()和show()不起作用,也没有这些方法。

1 个解决方案

#1

I think binding a mousedown event will get you what you want

我认为绑定一个mousedown事件会得到你想要的

<script type="text/javascript">
    $(function() {
        $("#initialdragger").draggable();
        $('#initialdragger').bind("mousedown", function(e) {
            $(this).css('top', 400);
        });
    });
</script>

#1

I think binding a mousedown event will get you what you want

我认为绑定一个mousedown事件会得到你想要的

<script type="text/javascript">
    $(function() {
        $("#initialdragger").draggable();
        $('#initialdragger').bind("mousedown", function(e) {
            $(this).css('top', 400);
        });
    });
</script>
标签：

相关文章