div内的kendoDraggable句柄答案

【问题标题】：kendoDraggable handle inside divdiv内的kendoDraggable句柄
【发布时间】：2014-01-18 08:07:56
【问题描述】：

我有一个拥有 kendoDraggable 和 jQuery 可调整大小的 div 的问题。当我调整大小时，会触发拖放事件，所以我有调整大小的提示和停止事件。我的目标是使用可调整大小的句柄来限制 kendoDraggable，但我没有设法在此句柄上初始化事件并在整个 div 上触发移动。

这里将生成的html代码放在div上移动

<div id="vignette_4" class="vignette vignetteFemme ui-resizable" style="position: absolute; top: 514px; left: 298px; width: 153px;">
<span class="libelleVignette">Raymonde BIDOCHON 22/08/1978 11110011</span>
<img src="Content/images/info_rhombus.png" class="detailVignette">
<div class="draggable" data-role="draggable" style="position: absolute; top: 3px; left: 15px; width: 123px; height: 3px; background-color: rgb(0, 0, 0);"></div>
<input type="hidden" id="LitId" value="11">
<input type="hidden" id="HospitId" value="1326">
<input type="hidden" id="HospiDateDebut" value="/Date(1388444400000)/">
<input type="hidden" id="HospiPeriodeDebut" value="1">
<input type="hidden" id="HospiDateFin" value="/Date(1388444400000)/">
<input type="hidden" id="HospiPeriodeFin" value="3">
<div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div>
<div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
</div>

如您所见，我在主 div“vignette”中添加了一个类“draggable”的 div。这是由

初始化的

$(".draggable").kendoDraggable({
    hint: function (vignette) {
        var v = vignette.clone();
        v.removeClass();
        var w = $(vignette).width();
        v.css({
            "border":"1px dashed gray",
            "width": w + "px"
        });
        return v;
    },
    cursorOffset: { top: 5, left: 5 }
});

但只有处理程序被移动。

【问题讨论】：

标签： jquery drag-and-drop kendo-ui

【解决方案1】：

因为可以回答我的问题，并且可以在此处回答下一个问题：)

将提示移至父级并且它正在工作

$(".draggable").kendoDraggable({
    hint: function (vignette) {
        var v = $(vignette).parent().clone();
        v.removeClass();
        var w = v.width();
        v.css({
            "border":"1px dashed gray",
            "width": w + "px"
        });
        return v;
    },
    cursorOffset: { top: 5, left: 5 }
});

【讨论】：