编辑：

Question

我有一个可拖动和可放置的布局。我从一个预先输入的搜索选择中添加它时创建一个可拖动的对象。不过我有一些＆＃34;安置＆＃34;的问题。可拖动对象的大小远大于应该放入的容器。这会导致一些丢弃问题。

我想在拖动开始时将元素的大小调整为<strong>当前大小的一半。我该怎么做呢？除非width的{{1}}设置为.semester左右，否则问题不会出现在小提琴中。

编辑：

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

var tempWidth

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 保存对您要拖动的元素的引用，这就是您在代码中看到它的原因。

这里也是working fiddle。

Answer 2

您应该查看ondragstart和ondragstop事件。如果你需要传递一些关于DOM元素原始状态的信息，比如原始宽度或其他东西，请查看ev.originalEvent.dataTransfer。

$(".courseBox").on('dragstart', function(ev) {
  $(this).css('width', '50%');
});

$(".courseBox").on('dragstop', function(ev) {
  $(this).css('width', '100%');
});

Answer 3

I have updated your fiddle just check it.
It is working with targeted width size

https://jsfiddle.net/8g2oqp0h/37/

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

编辑：

3 个答案: