Jquery 可排序的 stange 鼠标偏移量答案

【问题标题】：Jquery sortable stange mouse offsetJquery 可排序的 stange 鼠标偏移量
【发布时间】：2011-02-16 01:02:12
【问题描述】：

我正在使用 jQuery 可排序插件（2 个连接列表）并且有一个奇怪的错误。拖动图片时鼠标在被拖动项的上方

截图：http://img408.imageshack.us/i/mouseb.png/

其中一个列表的 HTML

    <ul class="flickr_key_ul ui-sortable">       
            <li><img style="display: inline;" src="http://farm3.static.flickr.com/1039/548804108_a8816f42f5_s.jpg" alt="Up the Ginnel" title="Up the Ginnel" class="flickr_image"></li>
            <li><img style="display: inline;" src="http://farm3.static.flickr.com/1116/548804090_7e625a461b_s.jpg" alt="Down the Ginnel" title="Down the Ginnel" class="flickr_image"></li>
            <li><img style="display: inline;" src="http://farm3.static.flickr.com/1011/548804074_75f2c0bd0e_s.jpg" alt="Entering the Ginnel" title="Entering the Ginnel" class="flickr_image"></li>
            <li><img style="display: inline;" src="http://farm3.static.flickr.com/1345/548804064_6023b070a7_s.jpg" alt="Up Bachelor Lane" title="Up Bachelor Lane" class="flickr_image"></li>

            <li><img style="display: inline;" src="http://farm3.static.flickr.com/1183/548804020_3116d900ce_s.jpg" alt="Down Bachelor Lane" title="Down Bachelor Lane" class="flickr_image"></li>
            <li><img style="display: none;" src="http://farm3.static.flickr.com/1325/548771897_0a32a6492a_s.jpg" alt="Flower" title="Flower" class="flickr_image"></li>
            <li><img style="display: none;" src="http://farm3.static.flickr.com/1411/548771891_e37de6bcc0_s.jpg" alt="Steps" title="Steps" class="flickr_image"></li>
            <li><img style="display: none;" src="http://farm3.static.flickr.com/1424/548771883_23a4909300_s.jpg" alt="Hopwood Bridle Way" title="Hopwood Bridle Way" class="flickr_image"></li>
            <li><img style="display: none;" src="http://farm3.static.flickr.com/1350/548771867_beaf20476b_s.jpg" alt="Cat, Sleeping" title="Cat, Sleeping" class="flickr_image"></li>
            <li><img style="display: none;" src="http://farm3.static.flickr.com/1393/548771853_af19a5dac2_s.jpg" alt="Road Cones, Hiding" title="Road Cones, Hiding" class="flickr_image"></li>
    </ul>

可排序的配置：

 horizontal: {
            helper: "clone", // Instead of dragging the real image a copy will be dragged
            connectWith: ["#flickr_sidebar ul"], // To be able to drag and drop an image to another image gallery they need to be connected
            cursor: 'pointer', //change the cursor when dragging
            appendTo: 'body', //When dropped the images need to be appended to the image gallery where they are dropped
            containment: rootel, //Make sure the user can't drag the images outside the widget
            revert: true, // if the user releases the image ouside the dropbox it'll return to it's original position
            zIndex: 9999
        },

有人知道怎么把鼠标放在中间吗？（cursorAt 不起作用）

【问题讨论】：

我有类似的问题，但可拖动的项目在鼠标的顶部偏移量。

标签： jquery mouse jquery-ui-sortable offset

【解决方案1】：

试试这个

horizontal: {
        helper: "clone", // Instead of dragging the real image a copy will be dragged
        connectWith: ["#flickr_sidebar ul"], // To be able to drag and drop an image to another image gallery they need to be connected
        cursor: 'pointer', //change the cursor when dragging
        cursorAt: { cursor: "move", top: 6, left: 275 },
        appendTo: 'body', //When dropped the images need to be appended to the image gallery where they are dropped
        containment: rootel, //Make sure the user can't drag the images outside the widget
        revert: true, // if the user releases the image ouside the dropbox it'll return to it's original position
        zIndex: 9999
    },

【讨论】：

遇到了类似的问题。 appendTo: 'body' 解决了它。

【解决方案2】：

当将左对齐从 {float:left} 更改为 {display:inline} 时，我遇到了鼠标指针偏移的相同问题。解决办法是：

cursorAt: { top: 0, left: 0 }

这适用于可排序和可拖动：

$( "#someid" ).draggable({cursorAt: { top: 0, left: 0 },...})
$( "#someid" ).sortable({cursorAt: { top: 0, left: 0 },...})

【讨论】：

只是想谢谢你！我遇到了这个问题，你的修复就像一个魅力！
这适用于我的 first 拖动，然后，我又得到了奇怪的偏移量。有什么建议吗？
可排序的容器必须具有位置：相对。这解决了我的问题。