1

このリンクにアクセスしてコードを実行してください。

http://jsfiddle.net/crisply/mQYVY/

簡単に説明すると、[ボックスを追加]ボタンをクリックすると、灰色の領域に緑色のボックスが追加されます。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../Scripts/jquery-1.8.2.js"></script>
    <script src="../Scripts/jquery-ui-1.8.24.js"></script>

    <style type="text/css">
        .draggable {
            position: absolute;
            width: 10px;
            height: 10px;
            background: green;
            cursor: move;
        }
        #canvas {
            width: 500px;
            height: 400px;
            background: #ccc;
            position: relative;
            margin: 2em auto;
        }
        #results {
            text-align: center;
            background: yellow;
        }
    </style>

<script type='text/javascript'>
    //<![CDATA[ 
    $(function () {
        $(".draggable").draggable({
            containment: "parent",
        });

        $('#btn_add').click(function () {
            var htmlData = '<div class="draggable"></div>';
            $('#canvas').append(htmlData);
            $(".draggable").draggable();
        });
    });
    //]]>  
</script>

</head>

<body>
    <form id="form1" runat="server">
        <div id="canvas">
            <div class="draggable"></div>
        </div>
        <div id="results">coordination</div>
        <input type='button' id="btn_add" value='Add box' />
        <input type='button' id="btn_getCoord" value="Get Coordination" />
    </form>
</body>
</html>

このコードに加えて、もっと実装したいです。

  1. [ Add box]ボタンをクリック => point generate random location

  2. [ Get Coordination]ボタンをクリック ⇒数点の座標を取得し、結果のdiv(黄色の部分)を表示します。

このような。

-座標-
x:230、y:222
x:122、y:233
x:423、y:55
x:50、y:30
...

いくつかのコンポーネントを教えてください。

本当にありがとうございました。

4

3 に答える 3

1

ここでの実装: http://jsfiddle.net/mQYVY/10/

最初の部分:

var htmlData = $('<div class="draggable"></div>');
var x = Math.floor(Math.random()*501);
var y = Math.floor(Math.random()*401);
htmlData.css({'left': x+'px', 'top': y+'px'});

第二部:

$('#btn_getCoord').click(function() {
    var output = '-Coordination-';
    $('.draggable').each(function() {
        output += '<br />x: ' + $(this).position().left + ', y: ' + $(this).position().top;
    });
    $('#results').html(output);
});
于 2013-10-16T09:18:45.903 に答える
1

http://jsfiddle.net/mQYVY/18/

$(function () {
    // This run when the document is ready, so it only effect on first point, it won't effect on new points automatically.
    $(".draggable").draggable({
        containment: "parent",
    });

    $('#btn_add').click(function () {
        var top = 1 + Math.floor(Math.random() * 390);
        var left = 1 + Math.floor(Math.random() * 490);
        var htmlData = '<div class="draggable" style="top:'+top+'px;left:'+left+'px;"></div>';
        $('.canvas').append(htmlData);
        // You need limit draggable containment for new point again.
        $(".draggable").draggable({containment: "parent"});
    });

    $('#btn_getCoord').click(function () {
        $('#results').html('-Coordination-');
        $('.draggable').each(function(){
            var cordInfo = '<br />x: '+$(this).position().left+', y: '+$(this).position().top;
            $('#results').append(cordInfo);
        });
    });
});
于 2013-10-16T09:24:31.677 に答える
0

最初の部分の更新された JS:

$(function () {
    $(".draggable").draggable({
        containment: "parent",
    });

    $('#btn_add').click(function () {
        var top = 1 + Math.floor(Math.random() * 390);
        var left = 1 + Math.floor(Math.random() * 490);
        var htmlData = '<div class="draggable" style="top:'+top+'px;left:'+left+'px;"></div>';
        $('.canvas').append(htmlData);
        $(".draggable").draggable();
    });
});

2 番目の部分については、次のリンクに従ってください: http://api.jquery.com/offset/

于 2013-10-16T09:23:50.840 に答える