jsTree 3：使用拖動手柄來限制啓動拖動

使用jsTree 3.0.8我想允許節點在樹內拖動和放置，但它應該只允許該操作，如果它是通過拖動特定按鈕或「拖動手柄」，而不是允許拖動行上任何位置的默認行爲。jsTree 3：使用拖動手柄來限制啓動拖動

我通過Html填充我的樹，併爲每個節點繪製出一個工具欄作爲該行Html內容的一部分。我將委派的jQuery點擊處理程序分配給工具欄項目。其中一個工具欄項目需要有一個移動圖標，並且只允許通過拖動該工具欄按鈕來移動該項目。

jQuery用戶界面也有類似的拖動手柄的概念在這裏記載： https://jqueryui.com/draggable/#handle

這裏是我的樹的一個節點。「重新排序」按鈕是我希望用戶能夠拖動該行的位置，而無需其他位置。

<li data-jstree="{ 'type': 'page' }"> 
    <i class="jstree-icon jstree-ocl" role="presentation"></i> 
    <a class="jstree-anchor" href="#" tabindex="-1" id="109_anchor"> 
     <i class="jstree-icon jstree-themeicon fa fa-2x fa-file font-grey-cascade jstree-themeicon-custom" role="presentation"></i> 
     <div class="pull-left"> 
      <div class="friendly-name">test</div> 
      <small>/okay/its/a/test</small> 
     </div> 
     <span class="nodeToolbar"> 
      <a title="Edit" class="passthrough btn grey-cascade btn-xs" href="/Pages/Edit/109"><i class="fa fa-pencil"></i> Edit</a> 
      <a title="Preview" class="preview btn grey-cascade btn-xs" target="_pagePreview" href="/Pages/Preview/109"><i class="fa fa-eye"></i> Preview</a> 
      <button title="Reorder" class="reorder btn grey-cascade btn-xs" href="#"> 
       <i class="fa fa-arrows"></i> Reorder 
      </button> 
     </span> 
    </a> 
</li>

我已經看了看，涉及check_callback一些其他的解決方案，但似乎只有防止在最後的移動操作（下降時），而不是我所需要的，這是在過濾操作開始（當拖動開始時）。

來源

2015-05-05 H Dog

你可能會需要與is_draggable工作： http://www.jstree.com/api/#/?q=is_dragg&f= $ .jstree.defaults.dnd.is_draggable

對於一個快速和骯髒的解決方案 - 監聽鼠標按下touchstart事件的錨節點，並設置一個變量，你可以再後來在is_draggable檢查，請使用：

var allow_drag = false; 
$('#tree').on('mousedown touchstart', '.jstree-anchor', function (e) { 
    allow_drag = e.target.className.indexOf('reorder') !== -1; 
}); 
$('#tree').jstree({ 
    dnd : { 
    is_draggable : function() { return allow_drag; }, 
    ...

來源

2015-05-05 20:34:35 vakata

謝謝，不知何故，我錯過了'is_draggable' –

記住上述解決方案將在3.0+工作，這裏列出的更優雅的解決方案將與最新的代碼只工作：HTTPS ：//github.com/vakata/jstree/issues/1103 – vakata

jsTree 3：使用拖動手柄來限制啓動拖動

回答

相關問題