드래그 된 요소 복제본이 원본의 너비를 유지하는 방법

Question

jQuery UI Draggable을 사용하여 너비가 레이아웃의 일부로 계산 된 <div> (margin:auto;)을 드래그합니다.

helper:clone을 사용하여 해당 요소를 끌면 해당 복제본도 margin:auto; 스타일을 갖지만 더 이상 원본 컨테이너의 제약을받지 않습니다.

결과 : 복제 된 <div>의 너비가 원본과 다를 수 있습니다.

바이올린 : http://jsfiddle.net/ericjohannsen/ajpVS/1/

가 어떻게 원래의 폭을 유지하기 위해 복제 될 수 있습니다?

Answer 1

당신은 당신이 찾고있는 무엇을해야한다,이 제거 될 때

$(ui.draggable).clone().css({ ... }); 여기 당신을 위해 업데이트 된 바이올린의 사용, 드래그 개체를 기반으로 복제 된 요소의 폭과 여백을 설정해야합니다. 또한 도우미 객체의 너비도 유지합니다. http://jsfiddle.net/ajpVS/2/

Answer 2

은 어디서 당신은 ... 나는 문제가 무엇인지 생각 :

<div style="width:50px"> 

그것은 또한 objectDrag 클래스에 포함 할 필요가 :

당신이 무엇을 의미하는지 먹으 렴 희망

<div class="objectDrag" style="width:50px;margin:auto; color:white;border:black 1px solid; background-color:#00A">Drag me</div> 

!

편집 : 상관없이 그것이 무엇인지 크기 폭없는 부모를 상속 재산을 상속 :

안녕 내가 너비를 사용하는 다른 얼핏 http://jsfiddle.net/He2KZ/1/

했다. 또한 국경을 제거하고 문제를 해결하는 것으로 나타났습니다. dragable clone은 2px 밖에 없으며 테두리는 1px입니다. 이것은 Jquery-ui IMO에서 다소 버그가 있습니다. 적어도 경계해야합니다.

테두리가 실제로 필요한 경우 "테두리"대신 "개요"를 사용해보십시오. 이 값은 div의 너비에 추가되지 않습니다.

Answer 3

Jon의 대답은 정말 좋지만 자식 요소가 draggable에있을 때 제대로 작동하지 않습니다. 그런 경우 때, event.target은 드래그의 자녀를 나타낼 수 있으며, 같은 드래그의 helper() 방법은 무엇인가 수정할 것 : 클릭 (

$(".objectDrag").draggable({ 
    helper: function(e) { 
    var original = $(e.target).hasClass("ui-draggable") ? $(e.target) : $(e.target).closest(".ui-draggable"); 
    return original.clone().css({ 
     width: original.width() // or outerWidth* 
    });     
    }, 
    ... 
}); 

Without this은 하위 요소를 나타낼 것이다 도우미가 드래그 내에서 클릭을 예를 들어 "드래그 1"상자의 하늘색 영역 내에서). Adding the additional logic above은 드래그 가능한 요소가 도우미에 사용되는지 확인합니다. 유사한 상황에있는 사람에게 도움이되기를 바랍니다.

---

* 주 : 원래의 요소 (가축 용 @ jave.web 덕분에) box-sizing: border-box 적용이있는 경우 당신은 outerWidth를 사용하는 것이 좋습니다.