jQuery Перетаскиваемые элементы ввода

Question

Я пытаюсь сделать элементы формы перетаскиваемыми с помощью jQuery UI. Например, кнопки, флажки, текстовые поля и т. Д. До сих пор мне не повезло. Есть ли у вас идеи, как это сделать?

Answer 1

Ну входные элементы должны быть доступны для редактирования, так что делают их перетаскиваемого бы их неизменяемыми.

Заверните их в <span> или <div> и я настоятельно рекомендую вам использовать handle.

Answer 2

Я думаю, что это лучше всего соответствует вашим требованиям :) Его перетаскиваемые + изменяемые по размеру элементы ввода, но вы не потеряли свою природу для редактирования.

$(function(){ 
    $('.draggable').draggable().resizable(); 
}); 

Вот мое решение для вас: my jsFiddle.

Answer 3

Хитрость состоит поставить прозрачный DIV над элементами входов:

div div{ 
    position:absolute; 
    z-index:2; 
    height: 100%; 
    width: 100%; 
} 

div input{ 
    position:relative; 
    z-index:1; 
} 
<div><div>&nbsp;</div><input type="text" value="..." disabled="true"/></div> 
$('body>div').draggable(); 

Answer 4

лучшим решением является то, что вы поместите их в DIV или пролетом

Answer 5

Может быть 3-х лет слишком поздно, но вы могли бы послать события и использовать следующий фрагмент кода для более ожидаемого поведения:

DEMO jsFiddle

$(".draggable").draggable({ 
    start: function (event, ui) { 
     $(this).data('preventBehaviour', true); 
    } 
}); 
$(".draggable").find(":input").on('mousedown', function (e) { 
    var mdown = new MouseEvent("mousedown", { 
     screenX: e.screenX, 
     screenY: e.screenY, 
     clientX: e.clientX, 
     clientY: e.clientY, 
     view: window 
    }); 
    $(this).closest('.draggable')[0].dispatchEvent(mdown); 
}).on('click', function (e) { 
    var $draggable = $(this).closest('.draggable'); 
    if ($draggable.data("preventBehaviour")) { 
     e.preventDefault(); 
     $draggable.data("preventBehaviour", false) 
    } 
});