2014-02-24 1 views
0

나는 여기를 잃고있다. jQuery UI 드래그 가능한 기반 draggable 응용 프로그램을 아주 잘 작동합니다. 그것은 내가 원하는 모든 것을하고 있습니다. 그러나 이미지 드래그를 할 때 이미지를 바탕 화면이나 다른 브라우저 탭으로 드래그 앤 드롭 할 수있는 기본 브라우저 기능은 항상 이미지를 클릭하고 조금 드래그해야한다는 것을 의미합니다. 드래그 할 수있게하려면 클릭하고 다시 드래그하십시오. 나는 내가 이런 일이 일어나지 않고 이미지를 끌 수있는 사이트를 보았다.jQuery UI Draggable - 브라우저 이미지 끌기를 방지하는 방법 (바탕 화면으로)

Here is a brief video showing you what is happening - 동영상에서 드래그 인 에이 블러가 초록색으로 변할 때 첫 번째 클릭에서 나는 이미지를 잡고 모든 것을 끌고 있습니다. 바탕 화면과 탭 막대에이 이미지를 놓아 새 탭에서 열 수있는 브라우저 동작입니다. 두 번째로 이미지를 클릭하고 위아래로 슬라이드하고 함수 호출에 정의 된대로 수직 축에만 구속시킵니다.

I've tried just about everything on this page 및 그 외 모든 것들은 드래그하려는 방식을 비롯하여 이미지의 드래그를 전혀 사용하지 않는 경향이 있습니다. 또한 각 이미지 주위에 div를 추가 했으므로 아무 것도 변경되지 않습니다. 어떤 아이디어?

여기 내 코드입니다 :

//Accessories dragging 
var $drag_contain = $('#current_build'); 
$(document).on('drag', '.drag', function(ev,dd) { 
    $(this).draggable({ 
     disabled: false, 
     axis: "y", 
     stop: function(event, ui) { 
      //when dragging is done, remove ability to drag 
      $(this).css('z-index','5').removeClass('drag').draggable('disable'); 
     } 
    }); 
}); 

여기

<div id="current_build"> 
<div class="10117" style="z-index:2;top:0px;left:0px;"><img src= 
"/assets/images/config_combos_sized/bas_18invhrcfootpedal.png" /></div> 

<div class="10124" style="z-index:3;top:0px;left:0px;"><img src= 
"/assets/images/config_combos_sized/col_47_5inshortvhrc.png" /></div> 

<div class="10356" style="z-index:1;top:0px;left:0px;"><img src= 
"/assets/images/config_combos_sized/cas_4intwin_18invhrc.png" /></div> 

<div class="10362" style="z-index:4;top:-27px;left:0px;"><img src= 
"/assets/images/config_combos_sized/dm_dualmonitormount.png" /></div> 

<div class="10374" style="z-index:5;top:34px;left:0px;"><img src= 
"/assets/images/config_combos_sized/acc_dividedutilitybin.png" /></div> 

는 분명 내가이 시점에서 이미지 주위 DIV의의가있는 HTML을합니다.

답변

0

밝혀졌습니다. 나는 다른 상호 작용을 기반으로 너무 많은 시간 동안 draggle을 활성화하거나 비활성화하려고합니다. 내 사건의 리펙토링이 이것을 고쳤습니다.

0

당신은

<div style="background: url('/assets/images/config_combos_sized/bas_18invhrcfootpedal.png') no-repeat;"></div> 

그런 다음 브라우저의 행동에 대한 걱정없이 드래그 할 수 있습니다 할 수 있습니다.