jquery滑块和可拖动不工作

问题描述：

我正在做一个横幅，你可以调整大小和拖动图像。我在jsfiddle中工作得很好。但由于某种原因，它不工作在我的网页上。jquery滑块和可拖动不工作

这里是的jsfiddle的例子：
http://jsfiddle.net/DennisBetman/tnaGA/

这里是它的外观在我的网页：
http://jewelbeast.com/posts/imgreplace.html

所以，如果你能看到。滑块不工作。可拖动的图像会变得很奇怪。

我在头部调用了脚本jquery和jquery ui。

他是我用于我的网页的代码。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI Draggable - Default functionality</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <style> 
    div { 
     width:370px; 
     height:204px; 
     position:relative; 
     overflow:hidden; 
     border-top-left-radius: 7px; 
     border-top-right-radius: 7px; 
    } 

    #box{ 
     background:black; 
     cursor: move; 
     border: 1px solid black; 
    } 


    #hidden-img{ 
     display:none; 
    } 
    </style> 
</head> 

<body> 
    <div id="box"> 
     <img src="http://www.hdwallpapersarena.com/wp-content/uploads/2013/04/high-resolution-fantasy-woman.jpg" id="hidden-img" /> 
     <img src="http://www.hdwallpapersarena.com/wp-content/uploads/2013/04/high-resolution-fantasy-woman.jpg" id="img" width="371" height="auto" style="top:-0px; left:-0px;" /> 
    </div> 
    <!-- style="top:-262px; left:-425px;" --> 
    <div id="zoom"></div> 
    <input type="hidden" id="amount-width" style="border: 0; color: #f6931f; font-weight: bold;" /> 
    <input type="hidden" id="amount-height" style="border: 0; color: #f6931f; font-weight: bold;" /> 

    <div class="text"></div> 

    <p> 
     Position x: 
     <input type="text" id="val-x" style="border:0; color:#f6931f; font-weight:bold;" /> 
    </p> 
    <p> 
     Position y: 
     <input type="text" id="val-y" style="border:0; color:#f6931f; font-weight:bold;" /> 
    </p> 

    <p> 
     <input type="file" onchange="readURL(this);" /> 
    </p> 
    <script> 
    var previousValue = 0; 
    var hiddenImageWidth = $("#hidden-img").width() - 370; 

    jQuery("#zoom").slider({ 
      max: hiddenImageWidth, 
      slide: function(event, ui){ 

      var sliderValue = jQuery("#zoom").slider("value"); 
      jQuery("#img").width(370 + sliderValue); 

      var pos = $("#img").position(); // returns an object with the attribute top and left 
      var top = pos.top; // top offset position 
      var left = pos.left; // left offset position 

      $("#val-x").val(left); 
      $("#val-y").val(top); 

      if (left > 0){ 
       $("#img").css("left",'0px'); 
      } 

      if (top > 0){ 
       $("#img").css("top",'0px'); 
      } 

      $("#amount-width").val(jQuery("#img").css("width")); 
      $("#amount-height").val(jQuery("#img").css("height")); 

      var width = $("#img").width(); 
      var widthZoom = width + sliderValue; 
      var widthVerschil = widthZoom - sliderValue; 
      var totalWidth = widthVerschil - '370'; 

      var height = $("#img").height(); 
      var totalHeight = height - '207'; 

      if (sliderValue < previousValue){ 
       var t, l; 
       t = $('#img').position().top; 
       l = $('#img').position().left; 
       if(t < 0) 
        t = t + (previousValue - sliderValue); 
       if(l < 0) 
        l = l + (previousValue - sliderValue); 
       $('#img').offset({top: t, left: l}); 
      } 
      previousValue = sliderValue; 

      $("#img").draggable({ 
       containment: [-totalWidth, -totalHeight, 0, 0], 
       scroll: false, 
       iframeFix: true, 
      }); 
      $('.text').html('<br/>The file size = ' + height + ' x ' + widthVerschil); 

      } 

    }); 

    var height = $("#img").height(); 
    var totalHeight = height - '207'; 

    $("#img").draggable 
    ({ 
     containment: [0, -totalHeight, 0, 0], 
     snap: false, 
     drag: function(event, ui) 
     { 
      $("#val-x").val(ui.position.left); 
      $("#val-y").val(ui.position.top); 

     } 

    }); 

    $("#img").offset({left: $(this).attr('position')}); 


    function readURL(input) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
       $('#img') 
        .attr('src', e.target.result) 

      }; 
      reader.readAsDataURL(input.files[0]); 
     } 
    } 

</script> 
</body> 
</html>

你可以看到我的脚本让我发生在身体的尽头。我试图把它放在我的头上，但没有任何工作，你不会看到一个滑块。等。

我也试图把这个脚本

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

下我的脚本功能。但那也行不通。

我希望有人看到这个问题。

谢谢。

答

您必须包装文档准备函数内部jQuery的代码：

var previousValue = 0; 
var hiddenImageWidth = $("#hidden-img").width() - 370; 


$(document).ready(function() { 
    jQuery("#zoom").slider({ 
     max: hiddenImageWidth, 
     slide: function (event, ui) { 

      var sliderValue = jQuery("#zoom").slider("value"); 
      jQuery("#img").width(370 + sliderValue); 

      var pos = $("#img").position(); // returns an object with the attribute top and left 
      var top = pos.top; // top offset position 
      var left = pos.left; // left offset position 

      $("#val-x").val(left); 
      $("#val-y").val(top); 

      if (left > 0) { 
       $("#img").css("left", '0px'); 
      } 

      if (top > 0) { 
       $("#img").css("top", '0px'); 
      } 

      $("#amount-width").val(jQuery("#img").css("width")); 
      $("#amount-height").val(jQuery("#img").css("height")); 

      var width = $("#img").width(); 
      var widthZoom = width + sliderValue; 
      var widthVerschil = widthZoom - sliderValue; 
      var totalWidth = widthVerschil - '370'; 

      var height = $("#img").height(); 
      var totalHeight = height - '207'; 

      if (sliderValue < previousValue) { 
       var t, l; 
       t = $('#img').position().top; 
       l = $('#img').position().left; 
       if (t < 0) t = t + (previousValue - sliderValue); 
       if (l < 0) l = l + (previousValue - sliderValue); 
       $('#img').offset({ 
        top: t, 
        left: l 
       }); 
      } 
      previousValue = sliderValue; 

      $("#img").draggable({ 
       containment: [-totalWidth, -totalHeight, 0, 0], 
       scroll: false, 
       iframeFix: true, 
      }); 
      $('.text').html('<br/>The file size = ' + height + ' x ' + widthVerschil); 

     } 

    }); 

    var height = $("#img").height(); 
    var totalHeight = height - '207'; 

    $("#img").draggable({ 
     containment: [0, -totalHeight, 0, 0], 
     snap: false, 
     drag: function (event, ui) { 
      $("#val-x").val(ui.position.left); 
      $("#val-y").val(ui.position.top); 

     } 

    }); 

    $("#img").offset({ 
     left: $(this).attr('position') 
    }); 
}); 

function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $('#img') 
       .attr('src', e.target.result) 

     }; 
     reader.readAsDataURL(input.files[0]); 
    } 
}

谢谢您的回答。我试过这个，但由于某种原因它仍然在窃听。 – 2013-05-04 11:58:59

当我在控制台中看，我尝试使用他说的滑块。 Uncaught TypeError：无法调用未定义的方法'addClass' – 2013-05-04 12:00:05

我检查了您的网站代码，我没有看到您的代码包装在ready函数中。首先再试一次。这是一个经典的问题，只有你的网站代码和你的jsfiddle之间的区别是比在jsfiddle，jquery代码包装在onload回调函数和jsfiddle使用jQuery UI 1.9.2而不是jQuery UI 1.10.3 {即使这不应该影响你的代码}。 – 2013-05-04 12:13:10

jquery滑块和可拖动不工作

相关推荐