如何启用/禁用dragula.js拖放?

时间:2019-07-16 08:20:08

标签: javascript jquery html dragula

我正在使用dragula.js,我希望只能在编辑模式下拖放div。我正在使用切换按钮进入和退出编辑模式。我尝试了drake.destroy(),drake.cancel(),但是它没有用。任何想法?

  var drake = dragula('.appZone', {
    moves: function (el, container, handle) {
      return handle.classList.contains('moveZone');
    }
  });
  drake.on('drag', function(element) {
    $(element).addClass('dragged-item');
  });

  drake.on('drop', function(element, container,source) {
    $(source).prepend( $(container).find('.draggableZone').not('.dragged-item') );
    console.log($(container).find('.draggableZone').not('.dragged-item'));
    $(element).removeClass('dragged-item');
  });

function toggleEditMode(){
  if(editMode==false){
    // enter edit mode
    $('.enter-edit').html('Exit edit mode');
    $('.addRow-btn-container').css('display','block');
    $('.addApp-btn-container').css('display','block');
    editMode=true;
    drake.start(this)
  }else{
    // exit edit mode
    $('.enter-edit').html('Edit page');
    $('.addRow-btn-container').css('display','none');
    $('.addApp-btn-container').css('display','none');
    $('.editZone').css('cssText','display:none !important;');
    // drake.cancel(true);
    drake.destroy();
    // drake.on('drag', (el, container, source) => {
    //    drake.cancel();
    // });
    editMode=false;
  }
}

0 个答案:

没有答案