Question

我有divs可拖动。当用户拖动div被停止时，如何显示确认按钮并播放一些背景声音“你确定”吗？此外，如果用户再次开始拖动div，则应确认按钮不透明度。因此，点击确认按钮后，应激活'$get('ajax/update_position.php'。

function make_draggable(elements)
{
    /* Elements is a jquery object: */

    elements.draggable({
        containment:'parent',
        start:function(e,ui){ ui.helper.css('z-index',++zIndex); },
        stop:function(e,ui){

            /* Sending the z-index and positon of the note to update_position.php via AJAX GET: */

            $.get('ajax/update_position.php',{
                  x     : ui.position.left,
                  y     : ui.position.top,
                  z     : zIndex,
                  id    : parseInt(ui.helper.find('span.data').html())
            });
        }
    });
}

Answer 1

我希望我能正确理解你的要求：

_{不相关的代码注释掉不破坏JSFiddle}

var $button = $("button"); 

function make_draggable(elements) {
    /* Elements is a jquery object: */

    elements.draggable({
        containment: 'parent',
        start: function (e, ui) {
            /*ui.helper.css('z-index', ++zIndex);*/
            // if the user starts dragging the div again, confirm button opacity should be decreased
            $button.hide(1000); // meaning hide the button
        },
        stop: function (e, ui) {
            // When a div is stopped being dragged by the user, how do I display a confirm button and play some background sound "Are you sure"? 

            $button.show(1000);  // display button

            /*Add code to play music here*/
        }
    });
}

$button.click(function () {
    alert(1); // check to make sure function is called
    /* Sending the z-index and positon of the note to update_position.php via AJAX GET: */
    /* removed to not disturb jsfiddle
            $.get('ajax/update_position.php',{
                  x     : ui.position.left,
                  y     : ui.position.top,
                  z     : zIndex,
                  id    : parseInt(ui.helper.find('span.data').html())
            });           */
});

make_draggable($("div"));

在javascript停止功能上显示按钮或添加声音

1 个答案:

DEMO