how to leave only input from a dialog with draggable disabled?

Question

I have a function that makes the dialog with draggable enabled but I need to be able to edit an input within this dialog. How do I make it so only this input is not inheriting the draggable from the parent dialog?

function to let draggable enabled:

function addDraggable(identifier, cancel) { 
 $('.'+identifier).parent().draggable({
        cancel: cancel + ", :button"
    });
 focusInputText();

}

function that I did to be able to edit the input, it even works, but I can’t navigate through the input correctly:

function focusInputText() { 
    $( 'input[type=text].urlCam' ).click(function(event) {
        event.preventDefault();
        $( this ).focus();
    });
}

Answer 1

Just add some selector to this input on the property cancel.

Take an example:

$('#drag').draggable({
    cancel: '.dont-drag'
});

div {
  height: 400px;
  width: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
  integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
  crossorigin="anonymous"></script>

<div id="drag" style="background-color: #CCC">

<input class="dont-drag" type="text">
<input type="text">
<button class="dont-drag">Botão 1</button>
<button>Botão 2</button>

</div>