不能用鼠標拖動jcrop選擇

我有jcrop這個奇怪的問題，我花了幾個小時試圖弄清楚。問題是我無法像在demo中那樣拖動/移動選擇。不能用鼠標拖動jcrop選擇

如果我努力，使圖像與選擇似乎與setSelect初始化腳本在頁面加載時，即選擇是可移動的，但一旦我用鼠標進行選擇，這種選擇（它取代了最初的不管我做什麼都不能被拖拽。但是，它可以隨鍵盤移動，但我不能依靠使用鍵盤的人。

我已經搜索了一下，唯一接近的是這篇文章：Cannot drag selection in Jcrop, what could break it?但這並不能解決我的問題（我沒有相對定位，我知道所以它不會是原因首先是問題）。

我使用jQuery 1.4.2和0.9.8 jcrop在Mac上使用以下設置（嘗試Firefox和Safari瀏覽器）：

function updateCoords(c) { 
     $('#x').val(c.x); 
     $('#y').val(c.y); 
     $('#w').val(c.w); 
     $('#h').val(c.h); 
    }; 

    function checkCoords() { 
     if (parseInt($('#w').val())) return true; 
     alert('Please select a crop region then press submit.'); 
     return false; 
    }; 

    $('#jcrop_target').Jcrop({ 
      minSize: [ 620,400 ], 
      maxSize: [ 620,400 ], 
      onSelect: updateCoords, 
      onChange: updateCoords 
    });

但我用一個簡單的$('#jcrop_target').Jcrop();確保也嘗試這不是導致衝突的其他職能。

任何輸入將非常非常感激。提前致謝！

拉爾斯

來源

2011-02-28 Lars

您能提供一個活動鏈接或http://jsfiddle.net（或http://jsbin.com :)來重現問題嗎？ – 2011-02-28 22:13:27

嗨馬特，我現在無法爲您提供一個鏈接（在本地服務器上工作），但也許我可以嘗試jsbin.com - 將不得不考慮這一點。在此之前，任何意見都非常值得歡迎:) – Lars 2011-02-28 22:40:12

我只是在jsbin.com上爲您呈現了一個例子，令我吃驚的是，我無法在這裏重現錯誤：選擇完全可以像演示一樣移動。所以現在我只需要弄清楚在我的本地設置中導致衝突的原因。這可能是真的。你有什麼建議嗎？我真的不知道要尋找什麼.. – Lars 2011-03-01 21:05:33

原來我其實也有一個位置：相對在我的CSS像在這篇文章中描述：

http://www.stackoverflow.com/questions/3380969/

所以去除解決它:)

來源

2012-12-22 22:52:29

我跑了在一個項目中出現問題，在那個項目中有人宣佈了CSS中所有div的相對位置。不幸的是，它需要太多的工作來修復它，所以我不得不通過代碼來找出修復。

使用最新的jCrop庫（本文發佈時爲Jcrop-0.9.12），對腳本進行了一些小改動，爲我解決了這個問題。

在各地jquery.Jcrop.js行1122看起來是這樣的：

 if (Touch.support) { 
      $track.bind('touchstart.jcrop', Touch.createDragger('move')); 
     } 

     $img_holder.append($track); 
     disableHandles();

通過改變$ img_holder.append（$軌道）到$ hdl_holder.append（$軌道），並確保$ hdl_holder是絕對位置，它解決了這個問題。一些相對定位和zindexing正在爲我殺死它。

兩個改變我做的腳本是：

線350 jquery.Jcrop。JS：

$hdl_holder = $('<div />').width('100%').height('100%').css('zIndex', 320),

更改爲：

$hdl_holder = $('<div />').width('100%').height('100%').css({ 
    zIndex: 320, 
    position: 'absolute' 
}),

線1122個jquery.Jcrop.js：

$img_holder.append($track);

更改爲：

$hdl_holder.append($track);

來源

2013-05-23 15:46:12

不能用鼠標拖動jcrop選擇

回答

相關問題