使jquery-ui可拖动方法中的ui.helper的中心位置为游标位置 [英] Make Cursor position in center for ui.helper in jquery-ui draggable method

查看:125
本文介绍了使jquery-ui可拖动方法中的ui.helper的中心位置为游标位置的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我希望游标位于中心中,可用于可拖动的ui.helper。

  $(。soclass)。draggable({

$ cursor:move,
helper:'clone',
revert:invalid,
tolerance:fit,
start:function(event,ui) {
$ b $(this).draggable(option,cursorAt,{
left:Math.floor(ui.helper.width()/ 2),
top:Math.floor(ui.helper.height()/ 2)
});


}

});




使用这个我只在第一个降
我怎样才能从第一滴中心对齐游标右边。


Jsfiddle

解决方案 div>

您可以访问可拖动实例的 offset.click 属性,这非常适合将光标置于选项中。设置选项的问题在于,只有在您下次触发开始事件时才会应用。但使用该属性,您可以在当前事件中进行设置。像这样:

  start:function(event,ui){
$(this).draggable('instance' ).offset.click = {
left:Math.floor(ui.helper.width()/ 2),
top:Math.floor(ui.helper.height()/ 2)
};
}

https://jsfiddle.net/38fay00b/


I want cursor to be in center for ui.helper of draggable .

I am doing this like this

$(".soclass").draggable({

          cursor: "move",
          helper: 'clone',
          revert: "invalid",
          tolerance: "fit",
          start: function(event, ui){

             $(this).draggable("option", "cursorAt", {
            left: Math.floor(ui.helper.width() / 2),
            top: Math.floor(ui.helper.height() / 2)
          }); 


          }

      });

Using this i get cursor in the center only after First drop. How can I center align the cursor right from first drop.

Jsfiddle

解决方案

You can access the offset.click property of the draggable instance, which is pretty much what setting the cursor at option does The problem with setting the option, is that as you describe it'll be applied only next time you trigger the start event. But using the property you can set it on the current event. Like this:

start: function(event, ui){
    $(this).draggable('instance').offset.click = {
        left: Math.floor(ui.helper.width() / 2),
        top: Math.floor(ui.helper.height() / 2)
    }; 
}

https://jsfiddle.net/38fay00b/

这篇关于使jquery-ui可拖动方法中的ui.helper的中心位置为游标位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆