Draggable not working in Chrome

08/12/2017 15:41

In our SharePoint project we needed to define our custom drag and drop functionality using draggable='true' html attribute rendered in SharePoint list views.This was working fine in Internet Explorer, but Chrome somehow ignored this attribute.

After lot of investigation and digging into this issue, we found out that if Taxonomy field is added to view, additional scripts are loaded. sp.ui.rte.js was causing problems, because dragstart etc was already bound there to document.body element.

Solution:

first we used global variable to find out if there are any taxonomy fields in list view (in OnPostRender part in JSLink)

if ($.grep(ctx.ListSchema.Field, function (val, index) { return (val.FieldType == 'TaxonomyFieldTypeMulti' '' val.FieldType == 'TaxonomyFieldType')}).length != 0) {
 isViewWithTaxonomyField = true;
}

this was only to avoid unexpected errors when binding is needed for other pages, to keep our unbinding impact as little as possible.

You can call function below (without check isViewWithTaxonomyField in condition) from console as well.

var ourNamespace = {
 
    dragNdropFixForTags: function () {
        if (isViewWithTaxonomyField && !RTE.RteUtility.isInternetExplorer() && !RTE.RteUtility.isFirefox()) {
            $removeHandler(document.body, "dragstart", RTE.Cursor.$DV);
            $removeHandler(document.body, "draggesture", RTE.Cursor.$DV);
            $removeHandler(document.body, "dragend", RTE.Cursor.$K2);
        }
    }
}

function ourNamespace.dragNdropFixForTags() is called then in window.load part, document ready was too early

$(window).load(function () {
  ourNamespace.dragNdropFixForTags();
});