2017-07-26 68 views
1

拖動期間擴大我具有低於項目是越來越在Firefox

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title></title> 
 
    </head> 
 
    <body> 
 
    <a class='dragitem' href='#' draggable='true'><img src="myimage.gif" width=12px height=12px border=0px padding="0px 0px 0px 0px" align=left>Drag Me</a>" 
 
    </body> 
 
</html>

一個示例代碼以上項是越來越擴大在Firefox同時拖動在其他瀏覽器的項目&(IE &鉻)它沒有變大。如果我刪除標籤,它在所有瀏覽器中都能按預期工作(項目沒有變大)。拖動時我附加了圖像。

請讓我知道,如何阻止這個項目在拖動時在Firefox中放大?

In Chrome & IE

In Firefox

+1

也請分享你的CSS代碼。問題可能在那裏。 –

+0

分享您的整個代碼 –

回答

0

首先,你要知道,鏈接和圖片是由按照W3Schools默認拖動。您無需爲您的鏈接輸入地址draggable="true"。關於Firefox的行爲,我嘗試了你的代碼,發現這是因爲鏈接中的圖像,你的拖動效果會擴大內容的大小。有了這個代碼,你不用它(我把圖片的鏈接外):

<body> 
    <a class='dragitem' href='#'>Drag Me</a> 
    <img src="myimage1.gif" width=12px height=12px border=0px padding="0px 0px 
    0px 0px" align=left> 
</body> 

你可以試試,你會沒有更多的在Firefox上放大的效果。現在問題是你的圖像的目的是什麼?爲什麼要放置鏈接HTML結構?我希望它能幫助你。

+0

感謝您的重播,我正在處理遺留代碼,我已經看到這種行爲,因此製作了一個示例應用程序並嘗試使用,並在Firefox中顯示相同的行爲。上面的代碼可能無法在我的情況下工作,因爲我必須顯示圖像也被拖到我的應用程序中,在您的代碼圖像不會被拖動與項目。 – NDestiny

+0

還有一件事,我必須展示<圖像項目圖像>,<圖像圖像項目>,<項目圖像圖像>以及其他組合。 – NDestiny

0

這可能是一個Firefox的錯誤或功能。如果使用較大的拖動對象,則不會調整它的大小,但如果它太小,則會假定您需要較大的視圖來查看它或類似的東西。既然你必須使用js/jquery作爲邏輯,爲什麼不使用jQuery UI's draggable呢?你可以更好地控制拖拽和樣式。

$(".dragitem").draggable({ 
 
    addClasses: false, 
 
    revert: true 
 
});
.ui-draggable-dragging a{ 
 
    color:red; 
 
}
<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.min.js"></script> 
 

 

 
<a class="dragitem" style="position:absolute" href='#' ><img src="http://jsfiddle.net/img/logo.png" width=22px height=18px border=0px padding="0px 0px 0px 0px" align=left />Drag Me</a>

+0

我沒有運氣兄弟,我正在處理遺留代碼:-( – NDestiny