Question

首先关注video;

如视频中所示，我尝试拖放元素;

这是一个小部件，一个支持DnD的元素;

<div class="well dragbox" id="dragbox_<?php echo $id; ?>" style="z-index: <?php echo $zid; ?>; left: <?php echo $dbview->left; ?>px; top: <?php echo $dbview->top; ?>px; width: <?php echo $dbview->width; ?>px; height: <?php echo $dbview->height + 18; ?>px; padding-bottom: 18px;">
            <div class='header' style="display:block;">
                <?php
                echo CHtml::link('', array("/user/dbview/delete/id/$id"), array('style' => 'float: right; margin-left: 10px; display:block;', 'class' => 'glyphicon glyphicon-remove-circle'), 'Are you sure you want to remove this widget?');
                ?>
            </div>
            <?php echo $code; ?>
        </div>

这是它的代码：

    $(".dragbox").draggable({
        handle: ".header",
        grid: [1, 1],
        containment: 'parent',
        reflow: true,
        stop: function(event, ui) {
            //do not update the widgets pos/size not even by accident when we are in forced rearrange mode
            if (jQuery('#widget_content').hasClass('floating-dashboard-widgets'))
                return false;
            var id = ui.helper.context.id.split('_')[1];
            $.ajax({
                type: "POST",
                url: "<?php echo Yii::app()->baseUrl . '/user/dbview/update/id/'; ?>" + id,
                data: {data: {left: ui.position.left, top: ui.position.top, parent_width: get_parent_width(), parent_height: get_parent_height()}},
                success: function(data) {
                    if (data.status == 'true') {
                    }
                },
                dataType: 'json',
            });
        }
    });

header是一个div，其中包含一个带有悬停效果的链接;

如果我点击右上方链接并开始拖动它，DnD元素将始终移动，不管我使用的浏览器是什么;

在这种情况下我使用了Chrome和IE9;

如果我尝试使用div.header元素作为句柄对元素进行DnD，则它会失败;

拖拽事件仅由句柄内容触发，由X右上角链接;

如何解决这个问题？

JQuery Library错误？仅由句柄内容触发的拖放事件

0 个答案: