Zanderwar Zanderwar - 6 months ago 25
Javascript Question

Sortable panels, removing draggable functionality from certain elements within

I have a jQuery UI sortable list with multiple panels within.

Unfortunately due to the draggable functionality, it's impossible to highlight/copy any text within those panels.

Therefore, I need only the header (green bar of course) of the panel to be draggable and the panel body to be excluded from this functionality.

example

Anyone have any experience with this?

Current code is out-of-box standard:

$('.ui-dropzone').sortable({
connectWith: ".ui-dropzone",
placeholder: "ui-state-highlight"
})

Answer

Use the handle option to define selector that can be used to drag with

$( ".selector" ).sortable({
  handle: ".handle"
});