简体   繁体   English

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

[英]How can I get a css position change to take effect during a JQuery UI Draggable element's start event handler?

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. 它不会响应位置更改,除非-这很奇怪-更改位置后,我做了一些导致javascript错误的操作。 Here's an example: 这是一个例子:


<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()无效, 这些方法也无效。

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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM