Javascript 使用控制柄图形拖动图像_Javascript_Html

Javascript 使用控制柄图形拖动图像

javascript html

Javascript 使用控制柄图形拖动图像,javascript,html,Javascript,Html,使用javascript和/或html5，我试图在浏览器中拖动4个连接图像，连接到一个抓手/把手图形，这四个图像也将连接到它们。因此，手柄基本上是可拖动的，不需要图像。只是想能够在屏幕上定义的区域周围移动图像谢谢，石质的我能够创造99%的我想要实现的东西。我唯一的问题是，当第二部电影带被拖走时，我能够动态地将单词/标签改为“住宅”。将会有两部电影连续剧。一个用于商业，一个用于住宅。无论拖动哪个，名称都需要更改。我需要一些帮助来让名字的改变生效。我已经试过了，但事实证明这很有挑战性。任

使用javascript和/或html5，我试图在浏览器中拖动4个连接图像，连接到一个抓手/把手图形，这四个图像也将连接到它们。因此，手柄基本上是可拖动的，不需要图像。只是想能够在屏幕上定义的区域周围移动图像

谢谢，石质的

我能够创造99%的我想要实现的东西。我唯一的问题是，当第二部电影带被拖走时，我能够动态地将单词/标签改为“住宅”。将会有两部电影连续剧。一个用于商业，一个用于住宅。无论拖动哪个，名称都需要更改。我需要一些帮助来让名字的改变生效。我已经试过了，但事实证明这很有挑战性。任何帮助都将不胜感激。请参阅下面的代码：

<!DOCTYPE html>


$（函数（）{
$（“#draggable”）.draggable（{handle:p}）；
$（“#draggable”）.draggable（{cursor:“crosshair”}）；
$（“#draggable”）.draggable（{containment:“none”}）；
});

商业




拖动一个电影带并选择要观看的视频。

问题是什么？有什么问题吗？您的代码在哪里？请在代码示例后提供一个适当的问题。还不太确定您需要什么，但您的

可拖动的

初始化不需要在一次初始化中包含所有选项吗？否则，您将初始化它三次<代码>$（“#draggable”）.draggable（{句柄：“p”，光标：“十字线”，包含：“无”}）

<head>
<link rel="stylesheet" href="boilerplate.css" />
<link rel="stylesheet" href="Page2.css" />
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<script src="jquery-1.10.2.js"></script>
<script src="jquery.ui.core.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.mouse.js"></script>
<script src="jquery.ui.draggable.js"></script>
<link rel="stylesheet" href="demos.css">
<meta charset="utf-8">

 <script>
$(function() {
    $( "#draggable" ).draggable({ handle: "p" });
    $( "#draggable" ).draggable({ cursor: "crosshair" });
    $( "#draggable" ).draggable({ containment: "none" });
});



</script>   

</head>
<body>



<div id="primaryContainer" class="primaryContainer clearfix">
    <div id="box" class="clearfix">
    </div>
    <div id="box1" class="clearfix">
    </div>
    <p id="text">
    <span id="effect">Commercial</span><br />
    </p>

<div id="wood" class="clearfix">




    <div id="draggable" class="ui-widget-content">

        <p class="ui-widget-header"><img id="image" src="img/film1_01.png" class="image" /></p>
        <img id="image1" src="img/film1_02.png" class="image" />
        <a href="RateCard.html" target="_blank" ><img id="image2" src="img/film1_03.png" class="image" />
        <a href="RateCard2.html" target="_blank" ><img id="image3" src="img/film1_04.png" class="image" />
        <img id="image4" src="img/film1_05.png" class="image" />
        <img id="image5" src="img/film1_06.png" class="image" />
        <img id="image6" src="img/film1_07.png" class="image" />
    </div></div>
    <p id="text1">
    <span id="textspan1">Drag a film strip and select the video you want to see.</span><br />
    </p>
</div>



</body>