拖动开始时更改可拖动元素的大小

Question

我有一个可拖动和可放置的布局.从类型搜索选择中添加时,我正在创建一个可拖动的对象.但是我有一些"安置"问题.可拖动对象的大小远大于应该放入的容器.这会导致一些丢弃问题.

拖动开始时,我不想将元素的大小调整为当前大小的一半.我该怎么做呢？除非这个问题是不存在的小提琴width的.semester设置为左右30%.

这是JSFiddle

编辑:

在实现了@ user619081解决方案后,我希望只有在对象非常大的情况下才能实现.我创建了一个全局变量var tempWidth并将代码更新为以下内容:

start: function(event, ui) {
    if(tempWidth < $(this).width()){
        $(this).addClass("moveable");
    }
    tempWidth = $(this).width();
},
stop: function(event, ui) {
    $(this).removeClass("moveable");
}

Answer 1

您需要挂钩拖动开始并拖动可拖动窗口小部件的停止事件.

在这里阅读更多相关信息:

• 拖动开始(开始) - http://api.jqueryui.com/draggable/#event-start
• 拖动停止(停止) - http://api.jqueryui.com/draggable/#event-stop

既然你知道如何使用它们,你可以这样做:

$(".courseBox").draggable({
  revert: "invalid",
  containment: "document",
  cursor: "move",
  start: function(event, ui) {
    $(ui.helper).css('width', "50%");
  },
  stop: function(event, ui) {
    $(ui.helper).css('width', "100%");
  }
});

请注意,ui.helper保存对您正在拖动的元素的引用,这就是您在代码中看到它的原因.

这也是一个工作小提琴.