“$” 是未定义的 JavaScript 错误。

Question

<script type="text/javascript">
    $(function() {
        $('#WaterMark').draggable(
                    {
                        start: function(e, ui) {
                        },
                        cursor: 'move',
                        zIndex: 2700,
                        revert: 'invalid',
                        containment: '#OriginalImageContainer'
                    });
        $('#OriginalImage').droppable({
            hoverClass: 'DroppableOver',
            drop: InitializeWaterMark
        })
    });

    var InitializeWaterMark = function() {
        var position = $('#WaterMark').position();
        var imgPosition = $('#OriginalImageContainer').position();
        document.getElementById('xpos').value = position.left - imgPosition.left;
        document.getElementById('ypos').value = position.top - imgPosition.top;

    }
    </script>

这是一个关于在ASP.NET网页中拖放图像的JavaScript示例代码...但它返回一个错误，指出'$'未定义..请帮我解决问题。

- Karthik

---

你确定已经正确地引入了jQuery库吗？ - janhartmann

看起来代码正在使用jQuery和jQuery UI。在编写代码之前，您需要下载并包含它们。 - James Allardice

一个显而易见的首要检查：你是否在页面中包含了jQuery？$变量不是原生JavaScript，它是jQuery。 - Zruty

如果您已经使用了JS CSS选择器框架，如jQuery，那么调用document.getElementBydId()就没有意义了。$('#xpos).val(position.left - imgPosition.left)可以完成相同的任务。 - Maxim Krizhanovsky

Answer 1

我的猜测是，您缺少支持该脚本（可能是jQuery）的库。

为了获得所需的可拖动功能，您需要引用JavaScript框架。

请尝试在您的页面中添加以下内容（在示例中的脚本块之前）：

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.js"></script>

- Phil.Wheeler

---

@Phil.Wheeler，我已经包含了它，现在显示出来了。对象不支持属性或方法“draggable”，你能帮帮忙吗？ - Karthik

我本应该猜到的。尝试添加对jQuery UI的引用。我已经更新了我的答案以反映这一点。 - Phil.Wheeler

顺便提一下，此答案中的示例检索JavaScript以使可拖动的内容工作，但您可能还需要样式表等。我建议您查看jQuery UI以查看如何主题化您的元素的示例，并了解有关如何使可拖动元素工作的互动演示。 - Phil.Wheeler

@Phil.Wheeler，谢谢，它起作用了...但是在将图像拖到另一个图像上后，它显示...无法设置属性'value'的值：对象为null或未定义...感谢您的帮助。 - Karthik

Answer 2

在页面中包含您的jQuery和jQuery UI脚本。我倾向于使用来自CDN（内容传送网络）的jQuery和jQuery UI文件http://www.asp.net/ajaxlibrary/cdn.ashx。此外，当CDN可能不可用时，我有一个备份。

<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.2.min.js"></script>
<script> window.jQuery || document.write('<script src="/scripts/jquery-1.6.2.min.js"><\/script>')

同样的方法也适用于jQuery UI库。

如果CDN宕机，将检查jQuery是否存在，如果不存在，则使用本地版本。

- Tim B James

Answer 3

如果是jQuery包含问题，则将此标签放置在aspx页面的头部，并编辑脚本标记中的src属性，以指向您自己的jquery.js副本。例如，如果jquery.js与您的HTML文件位于同一目录中，则可以使用以下代码：

您可以从 下载jQuery页面 下载自己的jQuery副本

如果您做得正确，请稍微解释一下情况。

- Niranjan Singh

---

Niranjan Kala-我参考了这个网站上的代码。它可以将一个图像拖放到另一个图像上...http://63.236.73.220/showthread.php?t=644902 - Karthik

请跟随这个问题：jQuery拖动图像 https://dev59.com/H3NA5IYBdhLWcg3wS70m - Niranjan Singh